我如何使用“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
我花了一天的时间在这方面工作，没有运气！ 然后我看着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一起工作。
我认为这是更好的解决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') 。
