Here's an example from a site I worked on.
I'll explain the code first. This site has a form with required fields
for First Name, Last Name and Email by default. If one clicks on the
Send a hard copy check box, the form expands, revealing the address
fields. These are now required. The rules for each of these fields is
added with $("#the_field_id_name").rules("add", "required");
When the checkbox is clicked, the address fields are hidden and the
address rules are removed from validation with $
("#the_field_id_name").rules("remove");
Notice that the rules for all address fields are set to required:
false. The rules are added and removed dynamically by clicking the
checkbox.
$(document).ready(function() {
// hide ebook form
$("#ebook_form").hide();
$("#send_hard_copy").click(function () {
if ($(this).is(":checked")) {
$("#address_info").slideDown("slow");
if ($("#submitButton_ebook").val() == 'Read Now') {
$("#submitButton_ebook").val("Submit");
} else {
$("#submitButton_ebook").val("提交");
}
$("#AddressLine1").rules("add", "required");
$("#City").rules("add", "required");
$("#State").rules("add", "required");
$("#PostalCode").rules("add", "required");
$("#Phone").rules("add", "required");
} else {
$("#address_info").slideUp("slow");
if ($("#submitButton_ebook").val() == 'Submit') {
$("#submitButton_ebook").val("Read now");
} else {
$("#submitButton_ebook").val("现在读");
}
$("#AddressLine1").rules("remove");
$("#City").rules("remove");
$("#State").rules("remove");
$("#PostalCode").rules("remove");
$("#Phone").rules("remove");
}
});
// validate signup form on keyup and submit
var v1 = $("#theForm").validate({
rules: {
"FirstName": {
required: true
},
"Email": {
required: true,
email: true
},
"LastName": {
required: true
},
"AddressLine1": {
required: false
},
"City":{
required: false
},
"State":{
required: false
},
"PostalCode": {
required: false
},
"Phone": {
required: false
}
},
messages: {
"FirstName": {
required: "Please enter your first name"
},
"Email": {
required: "Please enter your email",
email: "Please enter a valid email"
},
"LastName": {
required: "Please enter your last name"
},
"AddressLine1": {
required: "Please enter your address"
},
"City":{
required: "Please enter your city"
},
"State":{
required: "Please enter your state"
},
"PostalCode": {
required: "Please enter your postal code"
},
"Phone": {
required: "Please enter your phone number"
}
}
// additional code omitted...
});
