jQuery validate - set conditional rules based on user selection

Question

Is it possible to easily setup a conditional rule with jQuery validate,

Simply put i'm trying add some logic which says, if checkbox 'A' is ticked - then field 'A' must be completed, if checkbox 'B' completed then fields 'B1' & 'B2' must be completed.

e.g if a checkbox with the name 'paypal' is checked - then the field named 'paypal_address' must be completed.

My existing logic is as follows:

<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');     } }); 

UPDATE

Using the method below from Rohit i've almost got this working perfectly.. My form has three checkboxes (only one can be selected) 1. Paypal 2. Bank 3. Check/Cheque

If Paypal is checked (by default it is) then only have the 'paypal_email_address' field required, if Bank is checked then 'account_number' & 'sort_code' fields are required & finally if Cheque is checked the 'check_payable_field' is required.

// i've got this so far $( ".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;   } 

});

Answer 1

jQuery Validate actually directly supports this, using dependency expressions.

All you need to do is change your validate options like this:

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

That's it!