我如何使用“select”插件使用jQueryvalidation?

我有一些使用所选插件的 <select>input,我想在客户端validation为“required”。 由于“select”隐藏了实际的select元素并创build了一个div和span的小部件,所以原生的HTML5validation似乎不能正常工作。 表单不会提交(这是好的),但是错误信息没有显示,所以用户不知道什么是错的(哪个不好)。

我已经转向jQueryvalidation插件(我计划使用最终反正),但迄今没有任何运气。 这是我的testing用例 :

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

这是让select通过一个空值,而不validation或显示错误信息。 当我注释掉chosen()行时,它工作正常。

我如何使用jQueryvalidation插件validationchosen()input,并显示错误消息为无效的?

jQueryvalidation忽略隐藏的元素,并且由于select插件添加visibility:hidden属性的select,请尝试:

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

要么

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

validate()函数之前添加此行。 这对我来说可以。

jQueryvalidation不会拾取隐藏的元素,但可以强制它validation各个元素。 黑客的位,但下面的工作:

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

要只select“选定”元素,您可以使用$('.chzn-done')

在我的。

我的表单有“validation”类,每个input元素都有“必需的”html代码:

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

和JavaScript代码select与jQueryvalidation

 $(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"}); } }); 

注意:如果input值为null,则类错误将追加到父'div'

//你可以通过另一种方式来隐藏你select的元素。 例如….

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

您也可能遇到在select下拉列表之前显示错误消息的麻烦。 我find了解决此问题的解决scheme,并将我的代码粘贴到此处与您分享

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

jqueryvalidation实际上添加了一个隐藏的标签html元素。 我们可以在不同的地方用相同的ID重新定义这个元素来覆盖原来的地方。

这个简单的CSS规则适用于joomla 3的select实现

select添加无效的类到隐藏的selectinput,所以使用它来定位所select的select框

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

@Anupal把我放在正确的道路上,但不知何故,我需要一个复杂的修复

启用。 .chosen被考虑

JavaScript的

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

或者你给你select的任何其他名字。 这是全局configuration。 考虑设置在顶层

为select创build自定义规则

感谢BenG

HTML

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

JavaScript的

同样, $.validator对象的全局configuration。 可以放在前面的命令旁边

 $.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-引擎/ demoChosenLibrary

你也可以试试这个:

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

请记住在每个select上添加.select-chosen类。

$('.select-chosen').valid()强制隐藏select的validation

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

我花了一天的时间在这方面工作,没有运气! 然后我看着Vtiger使用的源代码,并find了黄金! 即使他们使用旧版本,他们有钥匙! 你必须使用

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

如果你不这样做,并且你已经有了class级通过class级的时间,那么select会被应用到所select的class级上,并且认为你所select的class级永远不会被更新。 如果你不把这个课程转到select的课程上,这应该是一个问题,但是如果你这样做的话,这是唯一的方法。

这与select1.4.2 validationEngine 2.6.2和jquery 2.1.4

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

我的表单包含有条件的隐藏字段,以防止隐藏select的字段未通过validation我已经扩展了默认的忽略:稍微隐藏一点:

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

我必须放置$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" })
$(document).ready(function() ,以便与choose.js一起工作。

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

我认为这是更好的解决scheme。

 //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... }); 

注意:您还需要更改errorPlacementcallback来处理显示错误。 如果你的错误信息是在字段旁边的话,你将需要使用.siblings('.errorMessageClassHere') (或者其他的方式取决于DOM)而不是.next('.errorMessageClassHere')