如何使用JQuery同时验证多个字段

Question

我创建了一个使用JQuery和JavaScript进行验证的表单。 唯一的问题是，它将一次验证一个字段。 因此，用户必须先更正第一个字段，然后再按一次提交以查看下一个字段是否有效。

我想做的是让JQuery在按下Submit之后验证整个表单并显示所有适用的错误消息。

这是我的JS：

function validateUserName()
{
    var u = document.forms["NewUser"]["user"].value
    var uLength = u.length;
    var illegalChars = /\W/; // allow letters, numbers, and underscores
    if (u == null || u == "")
    {

        $("#ErrorUser").text("You Left the Username field Emptyyy");
        return false;
    }
    else if (uLength < 4 || uLength > 11)
    {
        $("#ErrorUser").text("The Username must be between 4 and 11 characters");
        return false;
    }
    else if (illegalChars.test(u))
    {
        $("#ErrorUser").text("The Username contains illegal charectors men!");
        return false;
    }
    else
    {
        return true;
    }
}

function validatePassword()
{
    var p = document.forms["NewUser"]["pwd"].value
    var cP = document.forms["NewUser"]["confirmPwd"].value
    var pLength = p.length;
    if (p == null || p == "")
    {
        $("#ErrorPassword1").text("You left the password field empty");
        return false;
    }
    else if (pLength < 6 || pLength > 20)
    {
        $("#ErrorPassword1").text("Your password must be between 6 and 20 characters in length");
        return false;
    }
    else if (p != cP)
    {
        $("#ErrorPassword1").text("Th passwords do not match!");
        return false;
    }
    else
    {
        return true;
    }
}

function validateEmail()
{
    var e = document.forms["NewUser"]["email"].value
    var eLength = e.length;
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/;
    var illegalChars = /[\(\)\<\>\,\;\:\\\"\[\]]/;

    if (eLength == "" || eLength == null)
    {

        $("#ErrorEmail").text("You left the email field blank!");
        return false;
    }
    else if (e.match(illegalChars))
    {

        $("#ErrorEmail").text("ILEGAL CHARECTORS DETECTED EXTERMINATE");
        return false;
    }
    else
    {
        return true;
    }
}

function validateFirstName()
{
    var f = document.forms["NewUser"]["fName"].value;
    var fLength = f.length;
    var illegalChars = /\W/;

    if (fLength > 20)
    {
        $("#ErrorFname").text("First Name has a max of 20 characters");
        return false;
    }
    else if (illegalChars.test(f))
    {
        $("#ErrorFname").text("Numbers,letter and underscores in first name only");
        return false;
    }
    else
    {
        return true;
    }


}

function validateLastName()
{
    var l = document.forms["NewUser"]["lName"].value;
    var lLength = l.length;
    var illegalChars = /\W/;

    if (lLength > 100)
    {
        $("#ErrorLname").text("Last Name has a max of 100 characters");
        return false;
    }
    else if (illegalChars.test(f))
    {
        $("#ErrorLname").text("Numbers,letter and underscores in last name only");
        return false;
    }
    else
    {
        return true;
    }


}

function validateForm()
{
    valid = true;
    //call username function
    valid = valid && validateUserName();

    //call password function
    valid = valid && validatePassword();

    //call email function
    valid = valid && validateEmail();

    //call first name function
    valid = valid && validateFirstName();

    //call first name function
    valid = valid && validateLastName();

    return valid;
}

这是我的提交表单代码：

$('#your-form').submit(validateForm);

Answer 1

代替返回true或false返回包含错误的字符串，如果未发现错误，则返回空字符串。

然后validateForm可能像

function validateForm()
{
    error = "";
    //call username function
    error += "\n"+validateUserName();

    //call password function
    error += "\n"+validatePassword();
    ...
    if(error === ""){
        return true;
    }
    $("#ErrorLname").text(error);
    return false;
}

工作小提琴

Answer 2

您需要访问所有字段，并检查该字段是否有效，否则无效。 如果该字段有效，请跳过该字段，否则将其放入数组中。 检查完所有字段后，一次显示数组中的所有错误字段。

Answer 3

var validate;
function validateUserName()
{
       validate = true;
        var u = document.forms["NewUser"]["user"].value
        var uLength = u.length;
        var illegalChars = /\W/; // allow letters, numbers, and underscores
        if (u == null || u == "")
        {
            $("#ErrorUser").text("You Left the Username field Emptyyy");
            validate     = false;
        }
        else if (uLength <4 || uLength > 11)
        {
            $("#ErrorUser").text("The Username must be between 4 and 11 characters");
            validate     = false;
        }
        else if (illegalChars.test(u)) 
        {
            $("#ErrorUser").text("The Username contains illegal charectors men!");
            validate     = false;
        }

}

    function validatePassword()
    {
        var p = document.forms["NewUser"]["pwd"].value
        var cP = document.forms["NewUser"]["confirmPwd"].value
        var pLength = p.length;
        if (p == null || p == "")
        {
            $("#ErrorPassword1").text("You left the password field empty");
           validate     = false;
        }
        else if (pLength < 6 || pLength > 20)
        {
            $("#ErrorPassword1").text("Your password must be between 6 and 20 characters in length");
            validate     = false;
        }
        else if (p != cP)
        {
            $("#ErrorPassword1").text("Th passwords do not match!");
            validate     = false;
        }

    }

    function validateEmail()
    {
        var e = document.forms["NewUser"]["email"].value
        var eLength = e.length;
        var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
        var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

        if (eLength == "" || eLength == null) 
        {

            $("#ErrorEmail").text("You left the email field blank!");
            validate     = false;
        } 
        else if (e.match(illegalChars)) 
        {

            $("#ErrorEmail").text("ILEGAL CHARECTORS DETECTED EXTERMINATE");
           validate     = false;
        } 

    }
    function validateFirstName()
    {
        var f = document.forms["NewUser"]["fName"].value;
        var fLength = f.length;
        var illegalChars = /\W/;

        if(fLength > 20)
        {
            $("#ErrorFname").text("First Name has a max of 20 characters");
            validate     = false;
        }
        else if (illegalChars.test(f))
        {
            $("#ErrorFname").text("Numbers,letter and underscores in first name only");
            validate     = false;
        }



    }

    function validateLastName()
    {
        var l = document.forms["NewUser"]["lName"].value;
        var lLength = l.length;
        var illegalChars = /\W/;

        if(lLength > 100)
        {
            $("#ErrorLname").text("Last Name has a max of 100 characters");
           validate     = false;
        }
        else if (illegalChars.test(f))
        {
            $("#ErrorLname").text("Numbers,letter and underscores in last name only");
            validate     = false;
        }

    }

function validateForm()   
{


     validateUserName();  
     validatePassword();    
     validateEmail();
     validateFirstName();
     validateLastName();

    return validate;
}