I'm using jQuery Validation to validate a form, and what I would like to do is this... I want it set so if a checkbox is checked than a editbox is validated differently, for example.
This is how it should be validate if the checkbox is not checked:
weight: { required: true, max: 50 }
This is how it should be validated if it is checked.
weight: { required: true, max: 100 }
Any ideas?
You'd use the Validate plugin's built-in rules('add') method to dynamically change the rule whenever the checkbox is clicked.
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>
Working Demo: http://jsfiddle.net/3hGxS/
Make a rule using the the max method and a function as a parameter. This will get evaluated when the field is validated, ie when element() is called on the field.
rules definition looks like this
rules: {
field1:
{
required: true,
max: function () { return $("#mycheckbox:checked").length ? 100 : 50; }
}
}
Also, revalidate the target field when rule changes or you may be left with an error message that no longer applies
$('#mycheckbox').on('change', function () {
$('#field1.error').each(function () {
$(this).valid();
});
});
note that this only revalidates the field if it is already validated, checking for the presence of the default errorClass 'error'.
with html like this
<input name="mycheckbox" id="mycheckbox" type="checkbox" />
<input name="field1" id="field1">
<input type="submit" />
Full JavaScript code is like this, find the fiddle here
$(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();
});
});
});
