web-dev-qa-db-ja.com

jQuery validate-ユーザーの選択に基づいて条件付きルールを設定します

JQuery validateで条件付きルールを簡単に設定することは可能ですか？

チェックボックス「A」がチェックされている場合-フィールド「A」が完了している必要があり、チェックボックス「B」が完了している場合はフィールド「B1」と「B2」が完了しなければならないというロジックを追加しようとしています。

たとえば、「Paypal」という名前のチェックボックスがオンになっている場合-「Paypal_address」という名前のフィールドに入力する必要があります。

私の既存のロジックは次のとおりです。

<script type="text/javascript">
$(document).ready(function () {

$('#checkout-form').validate({
    rules: {
        first_name: {
            minlength: 2,
            required: true
        },
        last_name: {
            minlength: 2,
            required: true
        },
        address_1: {
            minlength: 2,
            required: true
        },
        address_2: {
            minlength: 2,
            required: true
        },
        post_code: {
            minlength: 2,
            required: true
        },            
        email: {
            required: true,
            email: true
        },
        terms: {
          required: true,
        }
    },
    errorPlacement: function(error, element) { 
      element.addClass('error');
    },        
    highlight: function (element) {
        $(element).addClass('nonvalid')
          .closest('.form-group').removeClass('error');
    },
    success: function (element) {
        //element.addClass('valid')
          //.closest('.form-group').removeClass('error');
          element.remove('error');
    }
});

更新

Rohitの以下の方法を使用すると、これはほぼ完全に機能します。私のフォームには3つのチェックボックスがあります（1つのみ選択できます）1. Paypal 2. Bank 3. Check/Cheque

Paypalがチェックされている場合（デフォルトでは）、「Paypal_email_address」フィールドのみが必要です。Bankがチェックされている場合は「account_number」フィールドと「sort_code」フィールドが必要です。

//これまでのところこれを取得しています$（ ".paymentMethod"）.on（ "click"、function（）{var payment_method = $（this）.val（）;

  if (payment_method == 'Paypal') {
    Paypal_checked = true;
  } else if (payment_method == 'bank-transfer') {
    bank_checked = true;
    Paypal_checked = false;
  } else if (payment_method == 'cheque') {
    cheque_checked = true;
    Paypal_checked = false;
  }

}）;

javascriptjqueryjquery-validate
34
Zabs

jQuery Validateは、 依存関係式 を使用して実際にこれを直接サポートします。

必要なことは、検証オプションを次のように変更することだけです。

$('#myform').validate({
    rules: {
        fieldA: {
           required:'#checkA:checked'
        }
    }
});

それでおしまい！

87
Ryley

カスタム検証メソッドを使用できます。例えば：

jQuery.validator.addMethod("checkA", function(value, element) {
    return YourValidationCode; // return true if field is ok or should be ignored
}, "Please complete A");

それをルールで使用します：

rules: {
    ....
    field_a: {
        required: false,
        checkA: true
    },
    ....
}

ご覧ください： http://jqueryvalidation.org/jQuery.validator.addMethod/

5
Gorsky

編集：私は最初は質問を適切に理解していませんでした、それについて謝罪します：Pしかし、ここでうまくいく解決策があります。

できることは、チェックボックスがチェックされているかどうかを確認し、Paypal_addressに必要なルールを次のように設定することです。

 var checked = false;
 $( "#paypalCheckbox" ).on( "click", function() {
      checked = $('#paypalCheckbox').is(':checked');
  });

そして、ルールに追加できます：

 Paypal_address : {
 required: checked
 }
3
Rohit