使用javascript进行表单验证，防止在发生错误时提交

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>

$(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>

A quick fix from your code will be the following.

    (function() {
            $("#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();
            });
            $("#formId").on("submit", checkForBlank);

            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();
                    username_err = false;
                }
            }

            function check_pwd() {
                var pass = $("#password").val();
                var pass_length = $("#password").val().length;
                //var re = /^[a-zA-Z_0-9@\!#\$\^%&*()+=\-[]\\\';,\.\/\{\}\|\":<>\? ]+$/;
                var re = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/;
                //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();
                            pwd_err_msg = false;
                        }
                    }
                }
            }

            function check_pwd_conf() {
                var pass1 = $("#password").val();
                var pass2 = $("#inputConfirmPassword").val();
                if (pass1 != pass2 || pass2.length === 0) {
                    $("#confirm_pwd_err_msg").html("Passwords don't match! ");
                    $("#confirm_pwd_err_msg").show();
                    confirm_pwd_err_msg = true;
                } else {
                    $("#confirm_pwd_err_msg").hide();
                    confirm_pwd_err_msg = false;
                }
            }

            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();
                    email_err = false;
                } 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();
                        fname_err = false;
                    }
                }
            }

            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();
                        lname_err = false;
                    }
                }
            }

            function checkForBlank(e) {
                check_userName();
                check_email();
                check_pwd();
                check_pwd_conf();
                check_fname();
                check_lname();

                if(username_err || email_err || pwd_err_msg || confirm_pwd_err_msg || fname_err || lname_err) {
                    e.preventDefault();
                }
            }
        }());

I have changed the checkForBlank function. I have attached it to the form submit event and checked for any errors inside it. Then prevented form submission if any errors found.

But I think the whole code needs to be refactored to reduce code duplication.

Update:

I have made changes to the above code. Here is the working jsfiddle.

Download the js file here : https://onionfiles.com/file/HGGaFR2G

and include it in, then try this

$().ready(function() {
        // validate form on keyup and submit
        $("#FORMID").validate({
            rules: {
                username: "required",
                email: "required",
                password: "required",
                retype_pass: {
                    required: true,
                    equalTo:"#password"
                }
                first_name: "required",
                last_name: "required"
            },
            messages: {
                username: "Please enter Username",
                email : "Please enter a valid Email",
                password: "Please enter a password",
                retype_pass: {
                    required: "Please confirm your password",
                    equalTo: "Please enter the same password as above"
                },
                first_name: "Please enter first name",
                last_name: "Please enter last name"
            }
        });
    });