Ich habe einige <select>Eingaben mit dem ausgewählten Plugin , die ich auf der Clientseite als "erforderlich" validieren möchte. Da "ausgewählt" das eigentliche Auswahlelement verbirgt und ein Widget mit Divs und Spans erstellt, scheint die native HTML5-Validierung nicht richtig zu funktionieren. Das Formular wird nicht gesendet (was gut ist), aber die Fehlermeldung wird nicht angezeigt, sodass der Benutzer keine Ahnung hat, was falsch ist (was nicht gut ist).

Ich habe mich an das jQuery-Validierungs-Plugin gewandt (das ich sowieso sowieso verwenden wollte), aber bisher kein Glück gehabt. Hier ist mein Testfall :

<form>
    <label>Name: <input name="test1" required></label>
    <label>Favorite Color:
        <select name="test2" required>
            <option value=""></option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
        </select>
    </label>
    <input type="submit">
</form>

$(document).ready(function(){
    $('select').chosen();
    $('form').validate();
});

Dies bedeutet, dass der selectWert mit einem leeren Wert durchgelassen wird, ohne dass die Fehlermeldung überprüft oder angezeigt wird. Wenn ich die chosen()Zeile auskommentiere, funktioniert es gut.

Wie kann ich chosen()Eingaben mit dem jQuery-Validierungs-Plugin validieren und die Fehlermeldung für ungültige anzeigen?

jQuery validate ignoriert das versteckte Element. Da das ausgewählte Plugin visibility:hiddender Auswahl ein Attribut hinzufügt , versuchen Sie Folgendes:

$.validator.setDefaults({ ignore: ":hidden:not(select)" }) //for all select

ODER

$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" }) //for all select having class .chosen-select

Fügen Sie diese Zeile kurz vor der validate()Funktion hinzu. Es funktioniert gut für mich.

Bei der jQuery-Validierung werden keine ausgeblendeten Elemente erfasst. Sie können sie jedoch zwingen, einzelne Elemente zu validieren. Ein bisschen wie ein Hack, aber das Folgende wird funktionieren:

$('form').on('submit', function(e) {
    if(!$('[name="test2"]').valid()) {
        e.preventDefault();
    }
});  

Um nur "ausgewählte" Elemente auszuwählen, können Sie verwenden $('.chzn-done')

in meinem.

Mein Formular hat die Klasse 'validate' und jedes Eingabeelement hat die Klasse 'require' HTML-Code:

<form id="ProdukProdukTambahForm" class="validate form-horizontal" accept-charset="utf-8" method="post" enctype="multipart/form-data" action="/produk-review/produk/produkTambah" novalidate="novalidate">
     <div class="control-group">
        <label class="control-label" for="sku">SKU</label>
        <div class="controls">
           <input id="sku" class="required span6" type="text" name="sku">
        </div>
     </div>
     <div class="control-group">
        <label for="supplier" class="control-label">Supplier</label>
        <div class="controls">
            <select name="supplier" id="supplier" class='cho span6 {required:true} '>                                           
                <option value=''>-- PILIH --</option>
                <?php
                foreach ($result as $res)
                    {
                    echo '<option value="'.$res['tbl_suppliers']['kode_supplier'].'">'.$res['tbl_suppliers']['nama_supplier'].'</option>';
                    }
                ?>
            </select>
         </div>
      </div>
</form>

und Javascript-Code zur Auswahl mit jquery-Validierung

$(document).ready(function() {
    // - validation
    if($('.validate').length > 0){
        $('.validate').validate({
            errorPlacement:function(error, element){
                    element.parents('.controls').append(error);
            },
            highlight: function(label) {
                $(label).closest('.control-group').removeClass('error success').addClass('error');
            },
            success: function(label) {
                label.addClass('valid').closest('.control-group').removeClass('error success').addClass('success');
            },
            //validate choosen select (select with search)
            ignore: ":hidden:not(select)"
        });
    }
    // - chosen, add the text if no result matched
    if($('.cho').length > 0){
        $(".cho").chosen({no_results_text: "No results matched"});
    }
});

Hinweis: Wenn der Eingabewert Null ist, wird der Klassenfehler an das übergeordnete 'div' angehängt.

// Sie können dies beheben, indem Sie das ausgewählte Element auf andere Weise ausblenden. z.B....

$(document).ready(function() {
 $.validator.addMethod(     //adding a method to validate select box//
            "chosen",
            function(value, element) {
                return (value == null ? false : (value.length == 0 ? false : true))
            },
            "please select an option"//custom message
            );

    $("form").validate({
        rules: {
            test2: {
                chosen: true
            }
        }
    });
    $("[name='test2']").css("position", "absolute").css("z-index",   "-9999").chosen().show();

    //validation.....
    $("form").submit(function()
    {
        if ($(this).valid())
        {alert("valid");
    //some code here 
        }
        return false;

    });
});

Diese einfache CSS-Regel funktioniert bei der Implementierung von Joomla 3

Mit "Ausgewählt" wird die Klasse ungültig zur verborgenen Auswahleingabe hinzugefügt. Verwenden Sie diese Option, um auf das ausgewählte Auswahlfeld abzuzielen

.invalid, .invalid + div.chzn-container a {
    border-color: red !important;
}

Ich musste mich $.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" })
draußen $(document).ready(function())aufhalten, um mit selected.js zu arbeiten.

https://stackoverflow.com/a/10063394/4063622

Möglicherweise treten auch Probleme auf, dass die Fehlermeldung vor der ausgewählten Dropdown-Liste angezeigt wird. Ich habe die Lösung zur Behebung dieses Problems gefunden und meinen Code hier eingefügt, um ihn mit Ihnen zu teilen

HTML:

<label class="col-sm-3">Select sponsor level *</label>
<asp:DropDownList ID="ddlSponsorLevel" runat="server" CssClass="col-sm-4 required" ClientIDmode="Static" />
<label class="error" id="ddlSponsorLevel-error" for="ddlSponsorLevel"></label>

Javascript:

if (!$('#ddlSponsorLevel').valid()) {
       $('#ddlSponsorLevel-error').text("You must choose a sponsor level");
            return false;
}

Jquery Validation hat tatsächlich ein HTML-Element mit versteckter Bezeichnung hinzugefügt. Wir können dieses Element mit derselben ID an einer anderen Stelle neu definieren, um die ursprüngliche Stelle zu überschreiben.

Ich habe ungefähr einen Tag damit verbracht und hatte überhaupt kein Glück! Dann habe ich mir den Quellcode von Vtiger angesehen und Gold gefunden! Obwohl sie ältere Versionen verwendeten, hatten sie den Schlüssel! du musst verwenden

data-validation-engine="validate[required]"

Wenn Sie dies nicht tun und es dort haben, wo Klassen durch die Klasse für die Auswahl geleitet werden, wird es auf die ausgewählten angewendet und es wird angenommen, dass Ihre ausgewählten niemals aktualisiert werden. Wenn Sie die Klasse nicht an die ausgewählte Klasse weitergeben, sollte dies ein Problem sein, ABER wenn Sie dies tun, ist dies die einzige Möglichkeit, wie es funktioniert.

Dies ist mit 1.4.2 ValidationEngine 2.6.2 und jquery 2.1.4 gewählt

// binds form submission and fields to the validation engine
jQuery("#FORMNAME").validationEngine({
    prettySelect : true,
    useSuffix: "_chosen"
    //promptPosition : "bottomLeft"
});

@ Anupal hat mich auf den richtigen Weg gebracht, aber irgendwie brauchte ich eine komplexe Lösung

Aktivieren .chosen, um berücksichtigt zu werden

Javascript

$.validator.setDefaults({ ignore: ":hidden:not(.chosen)" })

Oder einen anderen Namen, den Sie Ihren Auserwählten geben. Dies ist eine globale Konfiguration. Erwägen Sie die Einstellung auf oberster Ebene

Erstellen Sie eine benutzerdefinierte Regel für die ausgewählte

Danke an BenG

html

<select id="field" name="field" class="chosen" data-rule-chosen-required="true">
    <option value="">Please select…</option>
</select>

Javascript

Wieder globale Konfiguration für $.validatorObjekt. Kann neben den vorherigen Befehl gestellt werden

$.validator.addMethod('chosen-required', function (value, element, requiredValue) {
    return requiredValue == false || element.value != '';
}, $.validator.messages.required);

jQuery("#formID").validationEngine({
     prettySelect : true,
     useSuffix: "_chzn"
});

jQuery-Validation-Engine / demoChosenLibrary

Sie können dies auch versuchen:

$('form').on('submit', function(event) {
    event.preventDefault();
    if($('form').valid() == true && $('.select-chosen').valid() == true){
        console.log("Valid form");
    } else {
        console.log("Invalid form");
    }
}); 

Denken Sie daran, .select-chosenjedem selects eine Klasse hinzuzufügen .

$('.select-chosen').valid()erzwingt die Validierung für die versteckten selects

http://jsfiddle.net/mrZF5/39/

Mein Formular enthält bedingt ausgeblendete Felder, um zu verhindern, dass die ausgeblendeten ausgewählten Felder nicht überprüft werden. Ich habe die Standardeinstellung "Ignorieren" erweitert: Ein wenig weiter ausgeblendet:

$.validator.setDefaults({ 
  ignore: ":hidden:not(.chosen-select + .chosen-container:visible)"  //for all select having class .chosen-select
    })

Ich denke, das ist die bessere Lösung.

//trigger validation onchange
$('select').on('change', function() {
    $(this).valid();
});

$('form').validate({
    ignore: ':hidden', //still ignore Chosen selects
    submitHandler: function(form) { //all the fields except Chosen selects have already passed validation, so we manually validate the Chosen selects here            
        var $selects = $(form).find('select'),
            valid = true;
        if ($selects.length) {
            //validate selects
            $selects.each(function() {
                if (!$(this).valid()) {
                    valid = false;
                }
            });
        }
        //only submit the form if all fields have passed validation
        if (valid) {
            form.submit();
        }
    },
    invalidHandler: function(event, validator) { //one or more fields have failed validation, but the Chosen selects have not been validated yet
        var $selects = $(this).find('select');     
        if ($selects.length) {
            validator.showErrors(); //when manually validating elements, all the errors in the non-select fields disappear for some reason

            //validate selects
            $selects.each(function(index){
                validator.element(this);
            })
         }
    },
    //other options...
});

Hinweis: Sie müssen auch den errorPlacementRückruf ändern , um die Anzeige des Fehlers zu behandeln. Wenn sich Ihre Fehlermeldung neben dem Feld befindet, müssen Sie statt .siblings('.errorMessageClassHere')(je nach DOM) andere Methoden verwenden .next('.errorMessageClassHere').

Im Jahr 2018 überprüfe ich, dass sich jQuery validate über ein Eingabefeld ohne Namen beschwert. Dieses Eingabefeld wird vom jQuery Chosen plguin angehängt.

Dieser Fehler tritt vor allem bei der Verwendung von ausgewählt auf.

Vielen Dank für diese Antwort https://stackoverflow.com/a/40310699/4700162 Ich löse das Problem:

Ändern Sie in der Datei Chosen.jquery.js

this.form_field_jq.hide().after(this.container);

mit diesem:

this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);

Sie können die jQuery-Validierung für das ausgewählte Plugin verwenden. Funktioniert gut für mich.

$('.chosen').chosen({
        allow_single_deselect: true
    });
    $.validator.setDefaults({ ignore: ":hidden:not(select)" });
        $('form').validate({
            highlight: function(element) {
                $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block text-danger',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element.parent());
            }
        }
    });

Verwenden Sie nach dem Aufruf von selected () die folgende jquery-Methode

$ ("# id"). css ("display": ""). addClass ("sr-only");

sr-only ist die Boot Strap-Klasse

Am Ende habe ich Folgendes gelöst:

Dies war für Chosen v1.8.7:

1. Öffnen Sie selected.js und suchen Sie in Zeile 199 Folgendes:

this.form_field_jq.hide().after(this.container),

2. Ersetzen Sie das durch:

this.form_field_jq.addClass('chosen-master').after(this.container),

3. Fügen Sie dieser Klasse diese CSS-Attribute hinzu:

.chosen-master {
  display: inline-block !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

Referenz: https://stackoverflow.com/a/64491538/7353382