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

77

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?

Wesley Murch
quelle
1
Überprüfen Sie dieses Plugin . Nicht wirklich eine Lösung, aber vielleicht möchten Sie es versuchen.
Elclanrs
@elclanrs: Danke, aber ich möchte mich vorerst an die De-facto-jQuery-Validierungsbibliothek halten, insbesondere an diesem Punkt im Projekt (beim Abschluss). Vielleicht in einem zukünftigen Projekt.
Wesley Murch
Dieser Beitrag hat mein Problem gelöst: stackoverflow.com/questions/10387553/… Einfach und elegant.

Antworten:

121

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.

Anupal
quelle
1
Dies war in meinem Fall völlig ausreichend. Vielen Dank.
Nick
1
Wo hast du diese Zeile gesetzt? Es scheint nicht für mich zu funktionieren: /
Charles Wood
1
direkt über der Funktion JQuery validate ().
Anupal
1
Hat für mich gearbeitet! Auf jeden Fall die einfachste Lösung.
kmgdev
7
Da alle meine ausgewählten Auswahlen die Klasse haben, .chosen-selectfinde ich es besser, sie zu verwenden $.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" });. Andernfalls würde dies bedeuten, dass alle versteckten Auswahlen validiert würden.
Tobias
19

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')

Mike Robinson
quelle
2
Es scheint, dass das e.preventDefault()nicht einmal notwendig ist, nur anzurufen $("element").valid(). Ich habe diesen Code verwendet und er scheint perfekt zu funktionieren : $('form').on('submit', function() {$('.chzn-done').valid();});. Danke für die Information.
Wesley Murch
4
.chzn-donewird nicht mehr zu "ausgewählten" Elementen ab Chosen 1.0 hinzugefügt
Sebastian Zaklada
5

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.

Acang Terpal
quelle
3

// 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;

    });
});
vikrant singh
quelle
Diese Antwort funktioniert nur, wenn Sie nicht .chosen () aufrufen. In der ausgewählten Bibliothek scheint es einen Fehler (eine Funktion?) Zu geben, der beim Aktivieren einer <Auswahl> diese ausblendet und somit nicht mehr mit den Validierungsregeln interagiert.
Zack Morris
2

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;
}
philip
quelle
In meinem Fall habe ich ul.chosen-options hinzugefügt : .input-validation-error { border-color: red !important; } .input-validation-error, .input-validation-error + div.chosen-container ul.chosen-choices { border-color: red !important; }.
Pas
2

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

Zu groß.
quelle
1

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.

Gavin Tian
quelle
1

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"
});
Mav2287
quelle
1

@ 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);
Alwin Kesler
quelle
Hallo Leute, ich habe ein Problem mit dem Fokus der jqueryvalidation , funktioniert nicht auf den ausgewählten Feldern, wissen Sie, wie Sie dieses Problem lösen können?
Paul Noris
Stellen Sie eine neue Frage mit etwas Hintergrund und helfen Sie gerne
Alwin Kesler
0

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/

Fred K.
quelle
0

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
    })

Ekolem
quelle
Funktioniert bei mir überhaupt nicht. Der .chosen-select + .chosen-container:visibleTeil wählt tatsächlich die Auserwählten aus <div>und nicht die, <select>die validiert werden müssen, daher bin ich mir nicht sicher, wie dies funktionieren soll.
25.
0

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').

Noypiscripter
quelle
0

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.

Geben Sie hier die Bildbeschreibung ein

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

MarkSkayff
quelle
0

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);
Antonio Faienza
quelle
0

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

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

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

sr-only ist die Boot Strap-Klasse

Mahammad Moine
quelle
0

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),

  1. Ersetzen Sie das durch:

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

  1. 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

Dani Amsalem
quelle