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 select
Wert 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?
quelle
Antworten:
jQuery validate ignoriert das versteckte Element. Da das ausgewählte Plugin
visibility:hidden
der 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.quelle
.chosen-select
finde 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.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')
quelle
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..chzn-done
wird nicht mehr zu "ausgewählten" Elementen ab Chosen 1.0 hinzugefügtin 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.
quelle
// 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; }); });
quelle
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; }
quelle
.input-validation-error { border-color: red !important; } .input-validation-error, .input-validation-error + div.chosen-container ul.chosen-choices { 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
quelle
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.
quelle
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" });
quelle
@ Anupal hat mich auf den richtigen Weg gebracht, aber irgendwie brauchte ich eine komplexe Lösung
Aktivieren
.chosen
, um berücksichtigt zu werdenJavascript
$.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
$.validator
Objekt. Kann neben den vorherigen Befehl gestellt werden$.validator.addMethod('chosen-required', function (value, element, requiredValue) { return requiredValue == false || element.value != ''; }, $.validator.messages.required);
quelle
jQuery("#formID").validationEngine({ prettySelect : true, useSuffix: "_chzn" });
jQuery-Validation-Engine / demoChosenLibrary
quelle
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
jedemselect
s eine Klasse hinzuzufügen .$('.select-chosen').valid()
erzwingt die Validierung für die verstecktenselect
shttp://jsfiddle.net/mrZF5/39/
quelle
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 })
quelle
.chosen-select + .chosen-container:visible
Teil 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.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
errorPlacement
Rü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')
.quelle
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.
quelle
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);
quelle
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()); } } });
quelle
Verwenden Sie nach dem Aufruf von selected () die folgende jquery-Methode
$ ("# id"). css ("display": ""). addClass ("sr-only");
sr-only ist die Boot Strap-Klasse
quelle
Am Ende habe ich Folgendes gelöst:
Dies war für Chosen v1.8.7:
this.form_field_jq.hide().after(this.container),
this.form_field_jq.addClass('chosen-master').after(this.container),
.chosen-master { display: inline-block !important; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; }
Referenz: https://stackoverflow.com/a/64491538/7353382
quelle