I'm trying to apply form validation using js,the problem I'm facing is the form always submits no matter what errors are shown in the form. the form contains 6 fields: username,email,password,retype_pass, first_name,last_name. the js code is like this:
$(function checkForBlank() {
$("#username_err_msg").hide();
$("#email_err_msg").hide();
$("#pwd_err_msg").hide();
$("#confirm_pwd_err_msg").hide();
$("#fname_err_msg").hide();
$("#lname_err_msg").hide();
var username_err = false;
var email_err = false;
var pwd_err_msg = false;
var confirm_pwd_err_msg = false;
var fname_err = false;
var lname_err = false;
$("#userName").focusout(function() {
check_userName();
});
$("#inputEmail").focusout(function() {
check_email();
});
$("#password").focusout(function() {
check_pwd();
});
$("#inputConfirmPassword").focusout(function() {
check_pwd_conf();
});
$("#inputFirstName").focusout(function() {
check_fname();
});
$("#inputLastName").focusout(function() {
check_lname();
});
function check_userName() {
var username_length = $("#userName").val().length;
if (username_length < 5 || username_length > 20) {
$("#username_err_msg").html("Username must be between 5 and 20 characters ! ");
$("#username_err_msg").show();
username_err = true;
} else {
$("#username_err_msg").hide();
}
}
function check_pwd() {
var pass = $("#password").val();
var pass_length = $("#password").val().length;
var re = /^[a-zA-Z_0-9@\!#\$\^%&*()+=\-[]\\\';,\.\/\{\}\|\":<>\? ]+$/;
//if pwd is less than 10 and doesnt contain special chars
if (pass_length < 6) {
$("#pwd_err_msg").html("Weak ! ");
$("#pwd_err_msg").show();
pwd_err_msg = true;
} else {
//if pwd is >= 5 or <= 10,and contains special char
if (pass_length >= 6 && pass_length < 9 && !re.test(pass)) {
$("#pwd_err_msg").html("Medium! ");
$("#pwd_err_msg").show();
pwd_err_msg = true;
} else {
//if pwd >11 and contains special char
if (pass_length >= 9 && !re.test(pass)) {
$("#pwd_err_msg").html("Strong! ");
$("#pwd_err_msg").show();
pwd_err_msg = true;
} else {
$("#pwd_err_msg").hide();
}
}
}
}
function check_pwd_conf() {
var pass1 = $("#password").val();
var pass2 = $("#inputConfirmPassword").val();
if (pass1 != pass2) {
$("#confirm_pwd_err_msg").html("Passwords don't match! ");
$("#confirm_pwd_err_msg").show();
pwd_err_msg = true;
} else {
$("#confirm_pwd_err_msg").hide();
}
}
function check_email() {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var email = $("#inputEmail").val();
if (re.test(email)) //valid email address
{
$("#email_err_msg").hide();
} else {
$("#email_err_msg").html("Invalid email address!");
$("#email_err_msg").show();
email_err = true;
}
}
function check_fname() {
var fname_length = $("#inputFirstName").val().length;
var first = $("#inputFirstName").val();
var re = /\d/g;
if (fname_length <= 2 || fname_length > 20) {
$("#fname_err_msg").html("First name must be between 2 and 20 characters ! ");
$("#fname_err_msg").show();
fname_err = true;
} else {
if (re.test(first)) {
$("#fname_err_msg").html("First name must not contain digits ! ");
$("#fname_err_msg").show();
fname_err = true;
} else {
$("#fname_err_msg").hide();
}
}
}
function check_lname() {
var lname_length = $("#inputLastName").val().length;
var sec = $("#inputLastName").val();
var re = /\d/g;
if (lname_length <= 2 || lname_length > 20) {
$("#lname_err_msg").html("Last name must be between 2 and 20 characters ! ");
$("#lname_err_msg").show();
lname_err = true;
} else {
if (re.test(sec)) {
$("#lname_err_msg").html("Last name must not contain digits ! ");
$("#lname_err_msg").show();
lname_err = true;
} else {
$("#lname_err_msg").hide();
}
}
}
});</div>
