如何使JavaScript表单验证同时显示错误消息

Question

是一个新的JavaScript程序员，我试图使用JavaScript创建表单验证器，但是如果所有表单都未填充，错误消息似乎不会显示，即如果全部为空，则只显示名称表单错误。

这是我的尝试：

function myValidate() { 
    var x = document.forms["myform"]["name"].value; 
    var y = document.forms["myform"]["country"].value; 
    var z = document.forms["myform"]["occupation"].value; 
    var a = document.forms["myform"]["status"].value; 

    if (x == "null" || x == "") { 
     var b = document.getElementById("nameErr"); 
     b.innerHTML = "Name Must Be Filled Out"; 
     return false; 
    } else { 
     var b = document.getElementById("nameErr"); 
     b.innerHTML = ""; 
     return true; 
    } 

    if (y == "null" || y == "") { 
     var c = document.getElementById("countryErr"); 
     c.innerHTML = "Country Must Be Filled Out"; 
     return false; 
    } else { 
     var c = document.getElementById("countryErr"); 
     c.innerHTML = ""; 
     return true; 
    } 

    if (z == "null" || z == "") { 
     var d = document.getElementById("occupationErr"); 
     d.innerHTML = "Occupation Must Be Filled Out"; 
     return false; 
    } else { 
     var d = document.getElementById("occupationErr"); 
     d.innerHTML = ""; 
     return true; 
    } 

    if (a == "null" || a == "") { 
     var e = document.getElementById("statusErr"); 
     e.innerHTML = "Status Must Be Filled Out"; 
     return false; 
    } else { 
     var e = document.getElementById("statusErr"); 
     e.innerHTML = ""; 
     return true; 
    } 
} 

这是JavaScript代码。

<form action="process.php" method="post" onsubmit="return myValidate()" name="myform"> 
    Name: 
    <input type="text" id="name" name="name"> 
    <span id="nameErr"></span><br><br> 

    Country: 
    <input type="text" id="country" name="country"> 
    <span id="countryErr"></span><br><br> 

    Occupation: 
    <input type="text" id="occupation" name="occupation"> 
    <span id="occupationErr"></span><br><br> 

    Status: 
    <input type="text" id="status" name="status"> 
    <span id="statusErr"></span><br><br> 

    <input type="submit" name="submit" value="Submit"> 
</form> 

这是HTML表单。

请帮帮忙，谢谢

Answer 1

看来你不知道，打电话return结束你的函数。如果验证失败，你要return false，但你不想return true直到验证过程结束。

尝试：

function myValidate() { 
    var x = document.forms["myform"]["name"].value; 
    var y = document.forms["myform"]["country"].value; 
    var z = document.forms["myform"]["occupation"].value; 
    var a = document.forms["myform"]["status"].value; 
    var b = document.getElementById("nameErr");  
    var c = document.getElementById("countryErr"); 
    var d = document.getElementById("occupationErr"); 
    var e = document.getElementById("statusErr"); 

    if (!x || x.length==0) { 
     b.innerHTML = "Name Must Be Filled Out"; 
     return false; 
    } else { 
     b.innerHTML = ""; 
    } 

    if (!y || y.length==0) { 
     c.innerHTML = "Country Must Be Filled Out"; 
     return false; 
    } else { 
     c.innerHTML = ""; 
    } 

    if (!z || z.length==0) { 
     d.innerHTML = "Occupation Must Be Filled Out"; 
     return false; 
    } else { 
     d.innerHTML = ""; 
    } 

    if (!a || a.length==0) { 
     e.innerHTML = "Status Must Be Filled Out"; 
     return false; 
    } else { 
     e.innerHTML = ""; 
    } 
    return true; 
} 

这将返回它后面的第一个错误。如果你想在一次检查所有这些，你将需要存储你的真/假的变量，并推迟任何return呼叫，直到然后结束，并呼吁return theVariableName;

Answer 2

你可以使用一个标志保存状态：

http://jsfiddle.net/vEvT2/1/

var flag = true; 

，并更改为false，如果发现空控制