jquery - jQuery.validate と selected.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

これを実現する最も簡単な方法は、次の方法を使用することです。

これにより、検証が表示されないという問題が解決されるだけでなく、標準の「input-validation-error」クラスが selected.js スタイルの選択に適用されます。

フォームの送信時と選択変更時の両方で適用する必要がある場合が 2 つあります。以下のコードの 3 つのセクションを参照してください。

1. 1 つ目は、隠し要素を検証するようにフォーム検証を設定します。
2. 2 番目は、送信時に選択された検証をチェックします。
3. 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");
    }
});

Answer 3

非表示になっているため、元の選択を無視しています。私は次のいずれかを取得しました：

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

また

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

仕事に。