5

フォームを検証するためにjQueryValidationを使用していますが、これを実行したいのですが、たとえば、チェックボックスがオンになっている場合と編集ボックスが異なる方法で検証されるように設定したいと思います。

チェックボックスがチェックされていない場合は、次のように検証する必要があります。

weight: { required: true, max: 50 }

これは、チェックされた場合に検証される方法です。

weight: { required: true, max: 100 }

何か案は？

4

2 に答える 2

8

Validate プラグインの組み込みrules('add')メソッドを使用して、チェックボックスがクリックされるたびにルールを動的に変更します。

jQuery :

$(document).ready(function () {

    // initialize the plugin
    $('#myform').validate({ 
        // other options,
        rules: {
            // other rules,
            weight: {
                required: true,
                max: 50 // initial value on load
            }
        }
    });

    // change the rule on checkbox and update displayed message dynamically
    $('#check').on('change', function () {
        if ($(this).is(':checked')) {
            $('#weight').rules('add', {
                max: 100
            });
        } else {
            $('#weight').rules('add', {
                max: 50
            });
        };
        $('#weight.error').each(function () {
            $(this).valid();
        });
    });

});

HTML :

<form id="myform">
    <input type="checkbox" id="check" />
    <input type="text" id="weight" name="weight" />
    <input type="submit" />
</form>

実際のデモ: http://jsfiddle.net/3hGxS/

于 2013-02-09T06:14:48.887 に答える
3

maxメソッドと関数をパラメーターとして使用してルールを作成します。これは、フィールドが検証されたとき、つまりフィールドで element() が呼び出されたときに評価されます。

ルール定義は次のようになります

rules: {
    field1:
    {
        required: true,
        max: function () { return $("#mycheckbox:checked").length ? 100 : 50; }
    }
}

また、ルールが変更された場合、または適用されなくなったエラー メッセージが残る可能性がある場合は、ターゲット フィールドを再検証します。

$('#mycheckbox').on('change', function () {
    $('#field1.error').each(function () {
        $(this).valid();
    });
});

これは、フィールドがすでに検証されている場合にのみ再検証し、デフォルトの errorClass 'error' の存在をチェックすることに注意してください。

このようなhtmlで

<input name="mycheckbox" id="mycheckbox" type="checkbox" />
<input name="field1" id="field1">
<input type="submit" />

完全な JavaScript コードはこのようなものです。ここでフィドルを見つけてください

$(function () {

   $("form").validate({
        rules: {
          field1:
          {
            required: true,
            max: function () {
                    return $("#mycheckbox:checked").length ? 100 : 50;
                }
            }
         },
        submitHandler: function () {
            alert('form ok');
        }
    });

    $('#mycheckbox').on('change', function () {
        $('#field1.error').each(function () {
            $(this).valid();
        });
    });

});
于 2013-02-10T10:29:36.750 に答える