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;
}
});
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!
You can use a custom validation method. For example:
jQuery.validator.addMethod("checkA", function(value, element) {
return YourValidationCode; // return true if field is ok or should be ignored
}, "Please complete A");
then use it in your rules:
rules: {
....
field_a: {
required: false,
checkA: true
},
....
}
Take a look: http://jqueryvalidation.org/jQuery.validator.addMethod/
Edit: I did not understand the question properly at first, I apologize for that :P But, here's a solution that should work.
What you can do is check whether or not the checkbox is checked and then set the required rule for paypal_address as such:
var checked = false;
$( "#paypalCheckbox" ).on( "click", function() {
checked = $('#paypalCheckbox').is(':checked');
});
And then in the rules you can add:
paypal_address : {
required: checked
}
jQuery validate with condition as a function result (adding on to Ryley's comment above):
$("#Form_Id").validate({
rules: {
CompletedBy: "required", //straight forward validation of field
Contact_No: "required",
Location: { required: noTableRow }//if no table row, make Location mandatory
}
});
//checks whether a table row exists
function noTableRow() {
return $("tr.tr_class").length == 0;
}
©2020 All rights reserved.