如何将jQuery验证与“选择的”插件一起使用？
我有一些使用chosen plugin的<select>输入，我想在客户端将它们验证为“必需的”。由于“select”隐藏了实际的select元素，并创建了一个带有div和span的小部件，因此原生HTML5验证似乎无法正常工作。表单不会提交(这很好)，但错误消息没有显示，所以用户不知道哪里出了问题(这不好)。
我已经求助于jQuery验证插件(我计划最终使用它)，但到目前为止还没有任何进展。这是我的test case
<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使用空值通过，而不验证或显示错误消息。当我注释掉chosen()行时，它工作得很好。
如何使用jQuery验证插件验证chosen()输入，并显示无效输入的错误消息？
回答 15
Stack Overflow用户
发布于 2013-06-26 19:55:39
select validate将忽略隐藏的元素，并且由于选择的插件将visibility:hidden属性添加到jQuery，请尝试：
$.validator.setDefaults({ ignore: ":hidden:not(select)" }) //for all select
或
$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" }) //for all select having class .chosen-select
将这一行添加到validate()函数之前。它对我来说很好。
Stack Overflow用户
发布于 2012-06-28 02:54:38
jQuery验证不会提取隐藏的元素，但您可以强制它验证单个元素。这是一个小技巧，但是下面的代码将会起作用：
$('form').on('submit', function(e) {
if(!$('[name="test2"]').valid()) {
e.preventDefault();
}
}); 要只选择“选定的”元素，可以使用$('.chzn-done')
Stack Overflow用户
发布于 2014-07-27 16:00:53
在我的。
我的表单有'validate‘类，每个输入元素都有'required’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>以及用于选择jquery验证的javascript代码
$(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"});
}
});注意:如果输入值为空，则类错误将被附加到父'div‘
https://stackoverflow.com/questions/11232310
复制相似问题