it-swarm.com.de

Wie kann ich die jQuery-Validierung mit dem "ausgewählten" Plugin verwenden?

Ich habe einige <select>-Eingänge, die das selected plugin verwenden, das ich als "erforderlich" auf der Clientseite validieren möchte. Da "selected" das eigentliche select-Element verbirgt und ein Widget mit divs und span erstellt, scheint die native HTML5-Überprüfung nicht ordnungsgemäß 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 dem jQuery-Validierungs-Plugin zugewandt (das ich sowieso geplant hatte), hatte aber bisher kein Glück. 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();
});

Dadurch wird die select mit einem leeren Wert durchgelassen, ohne die Fehlermeldung zu bestätigen oder anzuzeigen. Wenn ich die chosen()-Zeile auskommentiere, funktioniert es gut.

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

70
Wesley Murch

jQuery validate ignoriert das ausgeblendete Element. Da das ausgewählte Plug-in das Attribut visibility:hidden zur Auswahl hinzufügt, versuchen Sie Folgendes:

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

OR

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

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

117
Anupal

bei der jQuery-Validierung werden nicht verborgene Elemente aufgenommen. Sie können jedoch die Validierung einzelner Elemente erzwingen. Ein bisschen Hack, aber Folgendes wird funktionieren: 

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

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

18
Mike Robinson

in meinem.

mein Formular hat die Klasse 'validate' und jedes Eingabeelement hat die Klasse 'required' 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 für die Auswahl mit Javascript-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"});
    }
});

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

4
Acang Terpal

// Sie können dies beheben, indem Sie das gewä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;

    });
});
3
vikrant singh

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

Ausgewählt fügt der verborgenen Auswahleingabe die Klasse ungültig hinzu

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

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

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

1
Tobi G.

Es kann auch vorkommen, dass eine Fehlermeldung vor der ausgewählten Dropdown-Liste angezeigt wird. Ich habe die Lösung für dieses Problem 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 fügte ein verstecktes html-Element hinzu. Wir können dieses Element mit derselben ID an anderer Stelle neu definieren, um die ursprüngliche Stelle zu überschreiben.

1
Gavin Tian

Ich habe ungefähr einen Tag daran gearbeitet und hatte überhaupt kein Glück! Dann sah ich mir den Quellcode an, den Vtiger benutzte, und fand Gold! Obwohl sie ältere Versionen verwendeten, hatten sie den Schlüssel! du musst benutzen 

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

Wenn dies nicht der Fall ist und Sie es haben, wo Klassen durch die Klasse für die Auswahl geleitet werden, wird sie auf die Auswahl angewendet, und es wird angenommen, dass Ihre Auswahl nie aktualisiert wird. Wenn Sie die Klasse nicht an die Auserwählten übergeben, 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

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

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

Aktivieren Sie .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 Auswahl

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 $.validator Objekt. Kann neben dem vorherigen Befehl stehen

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

Vielen Dank dieser Antwort https://stackoverflow.com/a/40310699/4700162 Ich löse das Problem: 

Ändern Sie in der Datei die 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);
0
Antonio Faienza

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());
            }
        }
    });
0
Altaf

Mein Formular enthält bedingt verborgene Felder, um zu verhindern, dass die ausgeblendeten ausgewählten Felder bei der Validierung fehlschlagen.

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

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

jQuery-Validation-Engine/demoChosenLibrary

0
dsmoreira

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-chosen-Klasse für jede selects hinzuzufügen.

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

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

0
Fred K

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

 enter image description here

Dieser Fehler tritt vor allen anderen Aktionen auf, wenn er ausgewählt wurde.

0
MarkSkayff

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 Callback errorPlacement ändern, um den Fehler anzuzeigen. Wenn sich die Fehlernachricht neben dem Feld befindet, müssen Sie .siblings('.errorMessageClassHere') (oder je nach DOM auf andere Weise) anstelle von .next('.errorMessageClassHere') verwenden.

0
noypiscripter