How do I validate fields using the Blur event and the Submit event on the same form.
Hello everyone:
I have a form I wish to validate and at this time decided not to use the validation plugin due to my needs and customization with ASP.NET.
The idea is to have the form validate on Blur (as the user leaves a field) , but also use the submit event if for any reason a person decides to submit an incomplete form.
Currently I have the blur event working and in addition to that, I also have an additional focus event and another blur event which provides more usability.
In a nutshell here is how the form works:
- User click in a field and the field turns blue with some text telling the user what is required for the form. If the user enters the wrong data, on blur an error message is thrown.
- So there is a hint which happens on focus and then on blur the field is either placed into normal/default or an error message is displayed.
My problem is, how do I integrate this with the submit button? How do I also make the same error on blur comes up on submit?
Because the validation is on blur, nothing happens if the user clicks the submit button. And even though there is server side validation, I would still like the validation to kick in if the submit button is click.
Here is my sample code: This is for an ASP.NET form.
Note: The idea of the variable was to use it on the submit event so that if the variable is false then this would prevent the form from submitting.
- $(document).ready(function () {
$('#txtUserName').blur(function () {
if ($('#txtUserName').val().match(isNumberLetter) && ($('#txtUserName').val().length >= 8)) {
IsValidUserName = true;
}
else {
IsValidUserName = false;
}
});
//VALIDATE PASSWORD
$('#txtPassword').blur(function () {
if ($('#txtPassword').val().match(isPassword) && ($('#txtPassword').val().length >= 8)) {
IsValidPassword = true;
}
else {
IsValidPassword = false;
}
});
//---------------------------
// USERNAME HINT
//---------------------------
$('#txtUserName').focus(function () {
if ($("p:contains(Username Unavailable:)").hasClass("default")) {
$("p:contains(About Usernames:)").removeClass("default").addClass("hint");
$('#userNameError').removeClass("error").addClass("default");
$('#txtUserName').removeClass("alert normal").addClass("focus-input");
$('#txtUserName + label').removeAttr("id", "lblUserName");
$('#txtUserName + label').addClass("info");
$('.hint i').css('color', '#0094ff');
}
$('#txtUserName').blur(function () {
if (!IsValidUserName) {
$('#txtUserName').removeClass("focus-input").addClass("alert");
$('#userNameError').removeClass("default").addClass("error");
$("p:contains(About Usernames:)").removeClass("hint").addClass("default");
$('#txtUserName + label').attr("id", "lblUserName");
$('#txtUserName + label').removeAttr("class", "info");
}
else {
$("p:contains(About Usernames:)").removeClass("hint").addClass("default");
$('#txtUserName').removeClass("focus-input").addClass("normal");
$('#txtUserName + label').removeAttr("class", "info");
}
});
});
$('#txtPassword').focus(function () {
$("p:contains(About Passwords:)").removeClass("default").addClass("hint");
$('#passwordError').removeClass("error").addClass("default");
$('#txtPassword').removeClass("alert normal").addClass("focus-input");
$('#txtPassword + label').removeAttr("id", "lblPassword");
$('#txtPassword + label').addClass("info");
$('.hint i').css('color', '#0094ff');
$('#txtPassword').blur(function () {
if (!IsValidPassword) {
$('#txtPassword').removeClass("focus-input").addClass("alert");
$('#passwordError').removeClass("default").addClass("error");
$("p:contains(About Passwords:)").removeClass("hint").addClass("default");
$('#txtPassword + label').attr("id", "lblPassword");
$('#txtPassword + label').removeAttr("class", "info");
}
else {
$("p:contains(About Passwords:)").removeClass("hint").addClass("default");
$('#txtPassword').removeClass("focus-input").addClass("normal");
$('#txtPassword + label').removeAttr("class", "info");
}
});
});
- });
Thanks for reading: