In the validation plugin I am using rules and messages to validate a
one form which is broken up into multiple steps within the one form.
Similar to this script http://jquery.bassistance.de/validate/demo/multipart/
but altered to add custom rules and messages. Here is what I have so
far.
$(document).ready(function() {
var v = $('#form').validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent('div').next('div'));
},
rules: {
// validate step one
name: {
required: true
},
company: {
required: true
},
designation: {
required: true
},
address: {
required: true
},
city: {
required: true
},
province: {
required: true
},
postal: {
required: true
},
phone: {
required: true
},
// validate step two
user_name: {
required: true,
minlength: 3,
remote: 'get.php?do=checkName'
},
password: {
minlength: 5
},
password_confirm: {
minlength: 5,
equalTo: '#password'
}
},
messages: {
name: {required: 'A first and last name is required.'},
company: {required: 'A company name is required.'},
designation: {required: 'A designation is required.'},
address: {required: 'A mailing address is required.'},
city: {required: 'A town or city is required.'},
province: {required: 'A province is required.'},
postal: {required: 'A postal code is required.'},
phone: {required: 'A phone number is required.'},
email: {required: 'A valid email address is required.'},
user_name: {required: 'A user name is required.',
minlength:
jQuery.format('A user name should be greater than {0} characters.'),
remote: jQuery.format('The user name {0} is already taken.')},
password: {rangelength: jQuery.format('Enter at least
{0}
characters.')},
password_confirm: {minlength: jQuery.format('Enter at
least {0}
characters.'), equalTo: 'Enter the same password as above.'}
}
});
$("#step2 .prevbttn").click(function(){
$("#step2").hide();
$("#step1").fadeIn("fast");
});
$("#step3 .prevbttn").click(function(){
$("#step3").hide();
$("#step2").fadeIn("fast");
});
$(".open2").click(function() {
if (v.form()) {
$("#step2").hide();
$("#step3").fadeIn("fast");
}
});
$(".open1").click(function() {
if (v.form()) {
$("#step1").hide();
$("#step2").fadeIn("fast");
}
});
});
In step one div I have all the step one fields <div id="step1">step
one fields</div>
In step two div I have all the step two fields <div id="step2">step
two fields</div>
I if I was to use this without the steps everything works perfect,
with the steps in validates step and even though step two is hidden it
still wants to validate it as well.
Is it possible to validate one form in mulitple sections? I tried the
remove funtion, I tried altering the multipart script but it seems it
works based on the accordian plugin and error messages not being
incorparated like I have above.
Can we when click on a button <input type="button" name="formNext1"
id="formNext1" value="Next" class="open1 formbttn" /> only validate a
section. <input type="button" name="formNext2" id="formNext2"
value="Next" class="open2 formbttn" /> validate another section?
