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

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

    $.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;
}

希望这会有所帮助......

Answer 3

试试这个。

验证：

ignore: function(index, element) {
    return !!$(element).parents(':hidden').length;
}

选择：

$('.chosen-select').chosen().change(function() {
   $(this).trigger('click');
});

Answer 4

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

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

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

Answer 5

实现此目的的简单方法是使用以下内容：

这不仅可以解决无法看到验证的问题，还可以将标准“input-validation-error”类应用于selected.js样式选择。

有两种情况需要在提交表单和选择更改时应用它。请参阅下面的代码的三个部分。

第一个设置表单验证以验证隐藏元素。
第二个检查提交时选择的验证。
第三个检查更改时选择的验证。

设置表单验证以显示隐藏：

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

检查表单提交：

$('#FormID').on('submit', function () {
    var ChosenDropDowns = $('.chzn-done');
    ChosenDropDowns.each(function (index) {
        var ID = $(this).attr("id");
        if (!$(this).valid()) 
        {
            $("#" + ID + "_chzn a").addClass("input-validation-error");
        }
        else 
        {
            $("#" + ID + "_chzn a").removeClass("input-validation-error");
        }
    });
});

检查选择更改：

$(".chzn-select").chosen().change(function () {
    var ID = $(this).attr("id");
    if (!$(this).valid()) {
        $("#" + ID + "_chzn a").addClass("input-validation-error");
    }
    else {
        $("#" + ID + "_chzn a").removeClass("input-validation-error");
    }
});

Answer 6

This Code will check validation on submit and also when choosen change is fired.
$("#form").validate({
                errorPlacement: function (error, element) {
                    if (element.is('select')) {
                        error.insertAfter(element.siblings(".chosen-container"));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).next().addClass(errorClass);
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).next().removeClass(errorClass);
                }
            });

            $(".chosen-select").chosen().change(function () {
                $("#form").validate().element(".chosen-select");
            });

Answer 7

它忽略原始选择，因为它是隐藏的。我得到了：

$("#Form").data("validator").settings.ignore = "";

或

var settings = $.data($('#Form')[0], 'validator').settings;
settings.ignore += ':not(.chzn-done)';

工作。

集成jQuery.validate和chosen.js

7 个答案: