0

JQuery と JavaScript を使用して検証するフォームを作成しました。唯一の問題は、一度に 1 つのフィールドを検証することです。したがって、ユーザーは最初のフィールドを最初に修正してから、もう一度送信を押して、次のフィールドが有効かどうかを確認する必要があります。

私がやりたいことは、送信を押した後にJQueryにフォーム全体を検証させ、該当するすべてのエラーメッセージを表示させることです。

これが私の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);
4

3 に答える 3

0 
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;
}
于 2013-05-18T13:20:20.327 に答える
0

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;
}

働くフィドル

于 2013-05-18T13:13:39.393 に答える