集成jQuery.validate和chosen.js

Question

我正在尝试使用choosen.js生成的选择下拉列表在表单上设置验证

这是我的代码:

$('.chzn-single').bind("change", function(){
     $myform.validate().element($(this));
});

我认为这样的事情可行,但我没有取得任何成功.有什么想法？

谢谢

Answer 1

我通过这样做完成了它:

var validator = $("#formid").data('validator');
validator.settings.ignore = ":hidden:not(select)";

通过这样做,您将验证隐藏的选择字段; chzn隐藏了您的默认列表并将其替换为自己的列表.

Answer 2

在遇到这个问题几天后，我找到了一种对我有用的方法。您需要在选择更改时触发验证，这可以通过 .change() 函数完成。我使用了以下代码：

$("#chosenElement").chosen().change(function() {
        $("#myForm").validate().element("#chosenElement");
    });

我正在使用所有最新版本（jquery 1.9，jquery.validate 1.11.1，选择 0.9.12）

Answer 3

这就是我正在使用的......

    $.validator.setDefaults({
        ignore: null, // you can use ":hidden:not(select)"
        errorPlacement: function(error, element) {
            if(element.hasClass('chzn-done')) {
                var id = element.attr("id");
                $("#"+id+"_chzn a").addClass("error");
            }
        }
    });

    $('#myform').validate();//use your form ID or class selector

    $('select').chosen()
        .change(function () {
            var id = $(this).attr("id");
            if($(this).valid())
                $("#"+id+"_chzn a").removeClass("error");
            else
                $("#"+id+"_chzn a").addClass("error");
    });

然后在css

.chzn-container a.error {
    border-color: red !important;
}

希望这可以帮助....