jquery - 如何在基于 DIV 的选择表单元素上对多个字段使用 jQuery Validate

Question

嗨，我已将此用于下拉框验证。如果我有多个下拉菜单，它只适用于一个下拉菜单意味着它无法正确显示

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

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

$('#country').dropkick({
    change: function (value, label) {
        $('#countryHidden').val(value);
      }
});

$('.example_form').validate({
   ignore: "",
    rules : {
        countryHidden : {
            required: true
        }
    },
    messages : {
      countryHidden : {
            required:"Please select your  country"              
        }  
    } 
});

小提琴