如何使用JavaScript在同一頁面上顯示多個錯誤消息

Question

我正在研究Java腳本，並且停留在一個階段。 在我的項目中，提交表單時，我必須驗證所有字段，並在表單字段上方的順序列表中的同一頁上顯示錯誤消息。 波紋管是我的代碼

function validation(){
    var errorMsg=new Array(); 
    //var errorMsg = "";
    if(document.getElementById("fullname").value = " "){
        errorMsg[0] = "Please Enter Full Name\n"
}
if(document.getElementById("street").value = " "){
        errorMsg[1]= "Please Enter Street Name\n"
}
if(document.getElementById("postcode").value = " "){
        errorMsg[2]= "Please Enter Postlecode\n"
}
if(document.getElementById("phone").value = " "){
        errorMsg[3]= "Please Enter Phone Number\n"
}
if(document.getElementById("email").value = " "){
        errorMsg[4]= "Please Enter Email Id\n"
}
if(errorMsg!=" "){
    var r =" ";
    for(var i=0;i<=errorMsg.length-1;i++){
    document.getElementById("error").innerHTML="<li>"+errorMsg[i]+"</li>"
    }   
    return false;
}
}
</script>

當我運行此代碼時，它只給我最后一個值

有人可以幫助我如何在表單頂部顯示錯誤消息嗎？

Answer 1

您在這里有一個錯誤：

document.getElementById("error").innerHTML="<li>"+errorMsg[i]+"</li>"

您需要附加errorMsg ，而不要分配它。 例如這樣：

document.getElementById("error").innerHTML+="<li>"+errorMsg[i]+"</li>"

如果要在頁面頂部顯示錯誤消息，則應在所需的位置創建div，為該div提供ID，並將innerHtml設置為此div：

<div id="AllErrors"></div>

document.getElementById("AllErrors").innerHTML+="<li>"+errorMsg[i]+"</li>"

另外，您可以在用戶輸入時（而不是在提交所有信息之后）改善驗證和驗證字段。

順便說一句，您在標簽<li>添加了錯誤。 因此，您知道還應該添加<ol>或<ul>來創建列表嗎？

Answer 2

您需要將每個錯誤附加到現有的.innerHTML而不是覆蓋現有的：

document.getElementById("error").innerHTML += "<li>"+errorMsg[i]+"</li>"
// note += instead of = here --------------^

雖然可以完全跳過循環，但是只需執行以下操作：

document.getElementById("error").innerHTML = "<li>"+errorMsg.join("</li><li>")+"</li>";

（ .join()方法將所有數組元素放入由指定文本分隔的字符串中。）

另外，如果僅滿足您的某些條件，則由於顯式設置特定索引，數組將具有未定義（丟失）的元素，這意味着您將添加<li>元素，並在其中顯示“未定義”。 您應該這樣做：

    errorMsg.push("Please Enter Full Name\n");
    // OR
    errorMsg[errorMsg.length] = "Please Enter Full Name\n";

...這兩個都將添加到數組的末尾。 然后測試是否有任何錯誤：

if (errorMsg.length > 0)

另外，if語句中的條件都在進行賦值，因為它們使用= ，應該在其中使用=== （或== ），並且您正在測試每個字段是否包含單個空格： " " ，我認為您要在其中測試比較一個空字符串""每個字段都是空的。

Answer 3

我稍微重寫了您的代碼。 這是我更改的內容：

• 我沒有檢查值是否等於" " ，而是使用了! 操作員。
• 我使用了對數組的push而不是按索引附加。 這意味着您的陣列中沒有空位。 push將元素添加到數組的末尾，而與索引無關。
• 我在數組上使用了forEach循環。 這遍歷了所有可枚舉的元素，無論有多少。

因此，示例：

JS

// This could be done on form submit, I used a button for the fiddle.
document.getElementById("button").onclick = function () {   
    var errorMsg = new Array();

    if(!document.getElementById("fullname").value){
        errorMsg.push("Please Enter Full Name");
    }

    if(!document.getElementById("street").value){
        errorMsg.push("Please Enter Street Name");
    }

    if(!document.getElementById("postcode").value){
        errorMsg.push("Please Enter Postal Code");
    }

    if(!document.getElementById("phone").value){
        errorMsg.push("Please Enter Phone Number");
    }

    if(!document.getElementById("email").value){
        errorMsg.push("Please Enter Email Id");
    }

    var messageHtml = "";

    errorMsg.forEach(function (message) {
        messageHtml += "<li>" + message + "</li>";
    });

    document.getElementById("error").innerHTML = messageHtml;
};

看到這個小提琴： http : //jsfiddle.net/M48gA/

Answer 4

您必須在if語句中使用===或==代替= 。

Answer 5

這是因為“錯誤”的innerHtml總是被替換。因此僅顯示最后一個值。

嘗試下面的鏈接

是否可以在不破壞后代事件偵聽器的情況下附加到innerHTML？

Answer 6

=是賦值運算符。 在if語句中，必須使用等於==或完全等於=== （也檢查類型）。

您還需要在語句清單中使用添加到現有運算符+= ：

if(document.getElementById("fullname").value == " "){
    errorMsg[0] = "Please Enter Full Name\n"
}
if(document.getElementById("street").value == " "){
    errorMsg[1]= "Please Enter Street Name\n"
}
if(document.getElementById("postcode").value == " "){
    errorMsg[2]= "Please Enter Postlecode\n"
}
if(document.getElementById("phone").value == " "){
    errorMsg[3]= "Please Enter Phone Number\n"
}
if(document.getElementById("email").value == " "){
    errorMsg[4]= "Please Enter Email Id\n"
}
for(var i=0;i<=errorMsg.length-1;i++){
    document.getElementById("error").innerHTML += "<li>"+errorMsg[i]+"</li>"
}  

Answer 7

我想您可以在每種情況下簡單地嘗試將錯誤消息附加到標簽上。

插入數組會將“未定義”的值放在數組中。 例如，如果您輸入有效的全名，則errorMsg [0]不會有任何內容。如果您輸入無效的街道，則errorMsg [1]將具有“請輸入街道名稱\\ n”條目。

現在，當您提交表單時，使用“提交”按鈕說，您將收到關於無效街道的錯誤消息，但對於數組的第一位將獲得“ undefined ”。