jQuery validation onblur
I am trying to get the jQuery validation working on a webpage I am creating. I have about 6 different fieldsets that contain the page's details. I am using this as I am hiding and showing them give a better user experience.
I have the plugin working as I want whenever I try submit the page and whenever I add a single character (when a textbox requires 2 or more characters) however I also want the validation to happen onblur. I want to inform my users straight away if they haven't met the validation condition so they can fix it straight away and don't have to come back.
Can anyone tell me what I need to do I am using the * http://bassistance.de/jquery-plugins/jquery-plugin-validation/ plugin.
This is the jQuery code I have written so far:
$("#aspnetForm").validate({
rules: {
<%=txtFirstName.UniqueID %>:
{
required: true,
minlength: 2
}
,
<%=txtSurname.UniqueID %>:
{
required: true,
minlength: 2
}
,
<%=txtMobileNumber.UniqueID %>:
{
required: true,
minlength: 8
}
,
<%=Email.UniqueID %>:
{
required: true,
email: true
}
,
<%=ddDay.UniqueID %>:
{
required: true
}
,
<%=ddMonth.UniqueID %>:
{
required: true
}
,
<%=ddYear.UniqueID %>:
{
required: true
}
,
<%=txtHouseNumber.UniqueID %>:
{
required: true,
minlength:1
}
,
<%=txtAddress1.UniqueID %>:
{
required: true,
minlength:5
}
,
<%=txtCity.UniqueID %>:
{
required: true,
minlength:2
}
,
<%=txtSuburb.UniqueID %>:
{
required: true,
minlength:2
}
,
<%=txtPostCode.UniqueID %>:
{
required: true,
minlength:4,
maxlength:4
}
,
<%=UserName.UniqueID %>:
{
required: true,
minlength:4
}
,
<%=Password.UniqueID %>:
{
required: true,
minlength:4
}
,
<%=ConfirmPassword.UniqueID %>:
{
equalTo: "ctl00$ctl00$cpMain$cpLeft$Password"
}
,
<%=chkTerms.UniqueID %>:
{
required: true
}
},
messages: {
<%=txtFirstName.UniqueID %>:
{
required: "Please enter your firstname",
minlength: "Minimum length is 2 characters"
},
<%=txtSurname.UniqueID %>:
{
required: "Please enter your lastname",
minlength: "Minimum length is 2 characters"
},
<%=txtMobileNumber.UniqueID %>:
{
required: "Please enter your mobile",
minlength: "Minimum length is 8 characters"
}
,
<%=ddDay.UniqueID %>:
{
required: "Please enter your date of birth"
}
,
<%=txtMobileNumber.UniqueID %>:
{
required: "Please enter your date of birth"
}
,
<%=txtMobileNumber.UniqueID %>:
{
required: "Please enter your date of birth"
}
,
<%=Email.UniqueID %>:
"Please enter a valid email"
,
<%=txtHouseNumber.UniqueID %>:
{
required: "Please enter your house number",
minlength:"Please add at least 1 character"
}
,
<%=txtAddress1.UniqueID %>:
{
required: "Please enter your address",
minlength:"Please add at least 5 characters"
}
,
<%=txtCity.UniqueID %>:
{
required: "Please enter your city",
minlength:"Please add at least 2 characters"
}
,
<%=txtSuburb.UniqueID %>:
{
required: "Please enter your city",
minlength:"Please add at least 2 characters"
}
,
<%=txtPostCode.UniqueID %>:
{
required: "Please enter your postcode",
minlength:"Please add the 4 required characters",
maxlength:"Only 4 characters are allowed"
}
,
<%=UserName.UniqueID %>:
{
required: "Please enter your username",
minlength: "Please add the 4 required characters"
}
,
<%=Password.UniqueID %>:
{
required: "Please enter your password",
minlength: "Please add the 4 required characters"
}
,
<%=ConfirmPassword.UniqueID %>:
{
equalTo: "Passwords must match"
}
,
<%=chkTerms.UniqueID %>:
{
required: "Please agree to the terms"
}
}
});
Any tips?
Answer
Diver Dan was right
$('form').validate({
onfocusout: function (element) {
$(element).valid();
},
rules: {
name: 'required',
from: 'required'
},
messages: {
name: 'Please enter your firstname',
from: 'Please enter where are you from'
}
});