如何在多个字段的基于DIV的select表单元素上使用jQuery Validate

嗨我已经提到这个下拉框validation。 如果我有多个表示它没有正确显示，它只适用于一个下拉列表

$(document).ready(function () { $('.default').dropkick(); $('.example_form').validate({ highlight: function (element, errorClass) { $(element).siblings('.dk_container').addClass('error'); $('.dk_toggle').css('border', 'none'); }, unhighlight: function(element, errorClass) { $(element).siblings('.dk_container').removeClass('error'); $('.dk_toggle').css('border', '1px solid #ccc'); } }); }); 

这是一个小提琴

如何突出显示每个字段的错误

Answer 1

试试这个小提琴：

http://jsfiddle.net/yWANA/5/

它现在已修复。

问题在于您编写的高亮代码。

如果你突出显示警报，你会发现它只会出错

这是一些代码：

  $(document).ready(function () { $('.default').dropkick(); $('.example_form').validate({ highlight: function (element, errorClass) { $(element).prev().addClass('error'); //$(element).prev().addClass('error'); $('.dk_toggle').css('border', 'none'); }, unhighlight: function(element, errorClass) { $(element).prev('.dk_container').removeClass('error'); $('.dk_toggle').css('border', '1px solid #ccc'); } }); 

}）;

Answer 2

只需为每个下拉列表设置一个隐藏字段，并在更改下拉列表值时将值分配给隐藏字段。 并向隐藏字段写入必填字段validation

 $('#country').dropkick({ change: function (value, label) { $('#countryHidden').val(value); } }); $('.example_form').validate({ ignore: "", rules : { countryHidden : { required: true } }, messages : { countryHidden : { required:"Please select your country" } } }); 

小提琴