3

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

这是我的代码：

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

我在想这样的事情可以工作，但我没有任何成功。有什么想法吗？

谢谢

4

7 回答 7

8

我通过这样做完成了它：

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

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

于 2013-02-07T23:17:30.497 回答
5

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

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

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

于 2013-04-19T08:01:27.763 回答
5

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

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

希望这可以帮助....

于 2013-04-23T11:36:22.507 回答
4

试试这个。

验证时：

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

选择时：

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

于 2014-10-09T22:41:32.907 回答
2 
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");
            });
于 2016-11-25T09:18:11.287 回答
1

最简单的方法是使用以下方法：

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

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

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

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

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");
    }
});
于 2013-04-17T14:07:19.327 回答
0

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

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

或者

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

去工作。

于 2013-01-23T21:13:23.413 回答