如何使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，如果發現空控制