在javascript中验证后无法提交表单

Help, I am trying to validate my form. It can validate all fields, but not submitting after validated. I tried to run the codes in http://jsfiddle.net/CrLsR/297/ but after validated the form, it can't proceed to the test.html page. I'm new in javascript so, I can't figure out what is the probleml. Any help will very much appreciated. thanks..

帮助,我正在尝试验证我的表单。它可以验证所有字段,但不能在验证后提交。我试图在http://jsfiddle.net/CrLsR/297/中运行代码,但在验证表单后,它无法进入test.html页面。我是javascript的新手,所以,我无法弄清楚问题是什么。任何帮助将非常感谢。谢谢..

here is the code :

这是代码:

//HTML FORM

<form name="form" id="form" onsubmit="return (validateForm(this));" action="test.htm" method="post">

<label for="firstname" id="errfName">First Name</label>
<li><input name="firstname" type="text" onkeyup="return(validatefName(this));"> <span id="warnfName"></span></li>

<label for="username" id="errUser">Username</label>
<li><input name="username" type="text" onkeyup="return(validateUsername(this));"> <span id="warnUser"></span></li>

<label for="password" id="errPass">Password</label></li>
<li><input name="password" id="password" type="password" onkeyup="return(validatePassword(this));"> <span id="warnPass"></span></li>

<label for="password2" id="errPass2">Confirm Password</label></li>
<li><input name="password2" id="password2" type="password" onkeyup="return(validatePassword2(this));"> <span id="warnPass2"></span></li>

<label for="email" id="errEmail">Email Address</label>
<li><input name="email" type="text" onkeyup="return(validateEmail(this));"> <span id="warnEmail"></span></li>

<li>&nbsp;</td>
<li><input name="Submit" value="Send" type="submit" ></li>

// Javascript code

// Javascript代码

var borderErr = "1px solid rgb(100,0,50)";
var borderOk = "1px solid rgb(0,150,50)";
var warn = "<b class='warn'>!</b>";

// for First Name validation
var matchfName = /^[a-zA-Z]$/;
var errorfNameEmpty = "<b class='err'>First name is required";

// for Username validation
var matchUsername = /^[A-Za-z][A-Za-z0-9]*(?:_[A-Za-z0-9]+)*$/;
var matchUsername2 = /^[a-z0-9_-]{5,15}$/;
var errorUsernameEmpty = "<b class='err'>Username is required\n</b>";
var errorUsernameInvalid = "<b class='err'>The username is not valid. Must contains 5 to 15 alpha numeric characters\n</b>";

// for Password validation
var matchPass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{7,15}$/;
var errPassEmpty = "<b class='err'>Password is required</b>";
var errPassInvalid = "<b class='err'>Password must contains with a combination of <br/>7 to 15 alpha numeric and special characters.";

// for Confirm Password validation
var errPassEmpty2 = "<b class='err'>Confirm password is required</b>";
var errPassInvalid2 = "<b class='err'>Confirm password must the same as password value.";

// for Email validation
var matchEmail = /^(([^<>()[\]\\.,;:\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 errEmailEmpty = "<b class='err'>Email address is required</b>";
var errEmailInvalid = "<b class='err'>Invalid email address. Please enter a valid email.";

 function validateForm(regForm) {
    var warning = "";
warning += validatefName(regForm.firstname);
warning += validateUsername(regForm.username);
warning += validatePassword(regForm.password);
warning += validatePassword2(regForm.password2);
warning += validateEmail(regForm.email);
if (warning != "") {
return false;   
}
return true;
}
// validate first name

function validatefName(fld) {
if(fld.value == "") {
    fld.style.border=borderErr;
    document.getElementById("errfName").innerHTML=errorfNameEmpty;
    document.getElementById("warnfName").innerHTML=warn;
        return false;
}
else {
    fld.style.border=borderOk;
    document.getElementById("errfName").innerHTML="First Name";
    document.getElementById("warnfName").innerHTML="";
        return true;
}   
}

//validate username

function validateUsername(fld) {
if (fld.value == "") {
    fld.style.border=borderErr;
    document.getElementById("errUser").innerHTML=errorUsernameEmpty;
    document.getElementById("warnUser").innerHTML=warn;
        return false;
    }  
else if ((!matchUsername.test(fld.value)) || (!matchUsername2.test(fld.value))) {
    fld.style.border=borderErr;
    document.getElementById("errUser").innerHTML=errorUsernameInvalid;
    document.getElementById("warnUser").innerHTML=warn;
        return false;
     } 
else {
    document.getElementById("errUser").innerHTML="Username";
    document.getElementById("warnUser").innerHTML="";
    fld.style.border=borderOk;
        return true;
     } 
}

 // validate password

function validatePassword(fld) {
if (fld.value == "") {
    fld.style.border=borderErr;
    document.getElementById("errPass").innerHTML=errPassEmpty;
    document.getElementById("warnPass").innerHTML=warn;
        return false;
}
else if (!matchPass.test(fld.value)) {
    document.getElementById("errPass").innerHTML=errPassInvalid;
    document.getElementById("warnPass").innerHTML=warn; 
    fld.style.border=borderErr;
        return false;
 }
else {
    fld.style.border=borderOk;
    document.getElementById("errPass").innerHTML="Password";
    document.getElementById("warnPass").innerHTML="";
        return true;
    }
} 
 // validate confirm password

function validatePassword2(fld) {
var passVal = document.getElementById("password").value;
if (fld.value == "") {
    fld.style.border=borderErr;
    document.getElementById("errPass2").innerHTML=errPassEmpty2;
    document.getElementById("warnPass2").innerHTML=warn;
        return false;
}
else if (passVal != fld.value) {
    document.getElementById("errPass2").innerHTML=errPassInvalid2;
    document.getElementById("warnPass2").innerHTML=warn; 
    fld.style.border=borderErr;
        return false;
}
else {
    fld.style.border=borderOk;
    document.getElementById("errPass2").innerHTML="Confirm Password";
    document.getElementById("warnPass2").innerHTML="";
        return true;
    }
}  

 // validate email address

function validateEmail(fld) {
    if (fld.value == "") {
    fld.style.border=borderErr;
    document.getElementById("errEmail").innerHTML=errEmailEmpty;
    document.getElementById("warnEmail").innerHTML=warn; 
        return false;
    } 
else if (!matchEmail.test(fld.value)) { 
    fld.style.border=borderErr;
    document.getElementById("errEmail").innerHTML=errEmailInvalid;
    document.getElementById("warnEmail").innerHTML=warn; 
        return false;
    } 
else {
    fld.style.border=borderOk;
    document.getElementById("errEmail").innerHTML="Email Address";
    document.getElementById("warnEmail").innerHTML=""; 
        return true;
    }
 }

4 个解决方案

#1

As your inner validation methods return true or false, you need to modify your parent validation method to this or similar.

当您的内部验证方法返回true或false时,您需要将父验证方法修改为this或类似方法。

function validateForm(regForm) {
    var formValid = true;
    formValid &= validatefName(regForm.firstname);
    formValid &= validateUsername(regForm.username);
    formValid &= validatePassword(regForm.password);
    formValid &= validatePassword2(regForm.password2);
    formValid &= validateEmail(regForm.email);
    if (!formValid) {
        return false;   
    }
    return true;
}

#2

Try changing this line

尝试更改此行

var warning = "";
warning += validatefName(regForm.firstname);
warning += validateUsername(regForm.username);
warning += validatePassword(regForm.password);
warning += validatePassword2(regForm.password2);
warning += validateEmail(regForm.email);
if (warning != "") {

To this line

到这一行

if(validatefName(regForm.firstname) == true && validateUsername(regForm.username) == true && validatePassword(regForm.password) == true && validatePassword2(regForm.password2) == true && validateEmail(regForm.email) == true) {

and see if it is correct now

现在看看它是否正确

#3

Based on your fiddle, I found some errors in your code in the condition

基于你的小提琴,我在你的代码中发现了一些错误

if (title=="" || title==null) { } else {
            alert("Please enter only alphanumeric values for your advertisement title");

}

Should be

if (title.length != 0) { } else {
            alert("Please enter only alphanumeric values for your advertisement title");
            return false;
  }

The second is a more effective way to check if a field has no value.

第二种方法是检查字段是否没有值的更有效方法。

I've also added return false in your else condition and the last return should be true. here is your validateForm function. I updated your fiddle here

我还在你的其他情况下添加了return false,最后一次返回应该是真的。这是你的validateForm函数。我在这里更新你的小提琴

  function validateForm() {
        // Validate Email
        var email = $("#fremail").val();


        if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email.length != 0) {

        } else {
            alert("Please enter a valid email");
            return false;
        }


        // Validate Title
        var title = $("#frtitle").val();

        if (title.length != 0) {} else {
            alert("Please enter only alphanumeric values for your advertisement title");
            return false;
        }


        // Validate URL
        var url = $("#frurl").val();
        if (validateURL(url)) {} else {
            alert("Please enter a valid URL, remember including http://");
            return false;
        }



        return true;
    }

#4

Set a Flag = 1 in the function validateForm()

在函数validateForm()中设置Flag = 1

Increment Flag, if have validation error

增加标志,如果有验证错误

End, return true, if Flag == 1 which means no error

结束,返回true,如果Flag == 1表示没有错误

function validateForm()
{
    var flag = 1;

    // Validate URL
    var url = $("#frurl").val();
    if (validateURL(url)) { } else {
        alert("Please enter a valid URL, remember including http://");
        flag++;
    }

    // Validate Title
    var title = $("#frtitle").val();
    if (title=="" || title==null) { } else {
        alert("Please enter only alphanumeric values for your advertisement title");
        flag++;
    }

    // Validate Email
    var email = $("#fremail").val();
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else {
        alert("Please enter a valid email");
        flag++;
    }

    if (flag == 1)
    return true;
    else     
    return false;
}