在我的页面上,有两个插件:jquery validate和jquery easyui ..我使用jQuery Validate来验证表单中的数据输入。并且我使用jQuery EasyUI自定义了一个组合框,允许在组合框中搜索数据。
所以,我把Validate插件:
$("#form1").validate({
rules:{
filename:{
required: true,
minlength: 3
},
leia:{
required: true
}
}
});
没关系!的工作!但是当我把easyUI插件,并在组合框'leia'中设置类时,'leia'的验证不起作用。
<form id="form1" action="" method="post">
<div>
<label>Name:</label>
<input type="text" name="filename" />
</div>
<div>
<label>Leiame:</label>
<select name="leia" class="easyui-combobox">
<option value=""></option>
<option value="1">Java</option>
<option value="2">C</option>
<option value="3">C#</option>
<option value="4">PHP</option>
</select>
</div>
<input id="submit-go" type="submit" name="add" value="Add" />
</form>
当我在'leia'中取下类时,验证工作!有人能帮我吗?
提前感谢
您所需要做的就是允许jQuery Validate对隐藏元素执行。EasyUI只是隐藏选择,并用自己的元素替换它,但最终在幕后更新你的选择。为了使这个工作:
$("#form").validate({
ignore:'',//by default it ignores hidden inputs, so setting this to blank overrides that
rules: {
leia: {
required: true
}
},
errorPlacement: function(error,element){
if (element.hasClass('combo-value')){
element.closest("span.combo").after(error);
} else {
element.after(error);
} }
});
我还添加了errorPlacement函数,它将错误消息移出简单的UI标记(否则它会被隐藏在overflow:hidden
set的span中)。
看它在这里工作:http://jsfiddle.net/ryleyb/B5XX7/2/