測試表單數據並返回單個錯誤消息（Javascript）

Question

在提交表單之前，我必須創建一個表單並驗證數據是否已經輸入（而不一定是準確的數據）。我已經能夠爲每個字段使用單獨的消息來做到這一點，但我需要能夠做到這一點，以便所有缺少的字段顯示在單個錯誤消息中（IE「您正在丟失姓氏和地址以及...」） 。有人可以幫幫我嗎。提前感謝您的任何意見。

<FORM onSubmit='return checkForm()' NAME='customerform'> 
<TABLE WIDTH=100% BORDER=1> 
<TR><TD>First Name: <INPUT TYPE='TEXT' NAME='firstname'></TD> 
<TD ALIGN=RIGHT> Last Name: <INPUT TYPE='TEXT' NAME='lastname'></TD></TR> 
<TR><TD COLSPAN=2>Address: <INPUT TYPE='TEXT' NAME='address' size =50></TD></TR> 
<TR><TD>City: <INPUT TYPE='TEXT' NAME='city'></TD> 
<TD ALIGN=RIGHT>State: <INPUT TYPE='TEXT' NAME='state' size=3> Zip: <INPUT TYPE='TEXT' NAME='zip' size=6></TD> 
<TR><TD COLSPAN=2>Email Address: <INPUT TYPE='TEXT' NAME='emailaddr' size=50></TD></TR> 
<TR><TD><INPUT TYPE='submit' value='Submit'></TD> 
<TD ALIGN=RIGHT><INPUT TYPE='reset'></TD></TR> 
</TABLE></FORM> 




function checkForm() 
{ 

var data = document.customerform.firstname.value 
    if (data.length <= 0) { 
    alert("Please enter your first name, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.lastname.value 
    if (data.length <= 0) { 
    alert("Please enter your last name, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.address.value 
    if (data.length <= 0) { 
    alert("Please enter your address, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.city.value 
    if (data.length <= 0) { 
    alert("Please enter your city name, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.state.value 
    if (data.length <= 0) { 
    alert("Please enter your state name, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.zip.value 
    if (data.length <= 0) { 
    alert("Please enter your zip code, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.emailaddr.value 
    if (data.length <= 0) { 
    alert("Please enter your email, it is required for us to process your order.") 
    return false 
    } 

} 

Answer 1

你的代碼中的每個檢查後有return false，因此，如果一個失敗，你永遠不會移動到其餘檢查。您需要檢查所有項目並記錄未通過驗證的項目（如果有），然後編寫關於所有項目的單個消息。

現在，正如我在上面的評論中提到的，您的代碼讓人想起2000年的代碼，需要大量更新才能遵循現代標準和最佳實踐。

參見代碼中的註釋詳細信息：

// Get references to each element you'll want to work with: 
 
var frm = document.querySelector("form"); 
 

 
// Set up event handlers the modern way and not via inline HTML event attributes 
 
frm.addEventListener("submit", checkForm); 
 

 
function checkForm(evt){ 
 
    var items = []; // Array to hold data-id's of invalid elements 
 
    
 
    // Loop through the form elements 
 
    for(var i = 0; i < frm.elements.length; i++){ 
 
    // Check the element for no value 
 
    if(frm.elements[i].value === ""){ 
 
     // If it has no value, put its custom data-id attribute value into the array 
 
     items.push(frm.elements[i].dataset.id); 
 
    } 
 
    } 
 
    
 
    // Check for errors and display message: 
 
    if(items.length > 0){ 
 
    // Cancel the form's submission 
 
    evt.preventDefault(); 
 
    // Turn all array items into a string, separated with commas and spaces 
 
    // but remove the last comma and space. 
 
    alert("You must provide entries for:\n" + items.join(", ").slice(0, -2)); 
 
    } 
 
}

/* Use CSS for styling, not HTML*/ 
 
#address, #emailAddr { width:25em; } 
 
#state { width:3em; } 
 
#zip { width:6em; } 
 

 
label.left { 
 
    display:inline-block; 
 
    width:100px; 
 
} 
 

 
/* Just for fun: */ 
 
.row { 
 
    margin-bottom:.5em; 
 
} 
 

 
input[type=text] { 
 
    box-shadow:0 0 1px green; 
 
} 
 

 
input[type=text]:focus { 
 
    box-shadow:0 0 1px blue; 
 
}

<!-- While HTML 5 can be written in any case you like, most would agree that 
 
    lower-case is easier to read. Next, don't use tables for layout, that's 
 
    the job of CSS. Also, use the <label> element for better accessibility. 
 
    But, most importantly here, if we use data-* attributes on the form 
 
    elements, we can store a custom string that can be used later. In our 
 
    case, in the error messages. Take note of how clean the HTML is now 
 
    that the styling and JavaScript have been removed from it. --> 
 
<form name='customerform' action='#' method=''> 
 
    <div class="row"> 
 
    <label for="firstName" class="left">First Name: </label> 
 
    <input type='text' name='firstName' id="firstName" data-id="First Name"> 
 
    <label for="lastName">Last Name: </label> 
 
    <input type='text' name='lastName' data-id="Last Name"> 
 
    </div> 
 
    <div class="row"> 
 
    <label for="address" class="left">Address: </label> 
 
    <input type='text' name='address' id="address" data-id="Street Address"> 
 
    </div> 
 
    <div class="row"> 
 
    <label for="city" class="left">City: </label> 
 
    <input type='text' name='city' id="city" data-id="City"> 
 
    <label for="state">State: </label> 
 
    <input type='text' name='state' id="state" data-id="State"> 
 
    <label for="zip">Zip: </label> 
 
    <input type='text' name='zip' id="zip" data-id="Zip Code"> 
 
    </div> 
 
    <div class="row"> 
 
    <label for="emailAddr" class="left">Email Address: </label> 
 
    <input type='text' name='emailAddr' id="emailAddr" data-id="Email Address"> 
 
    </div> 
 
    <div class="row"> 
 
    <input type='submit' value='Submit'> 
 
    <input type='reset'> 
 
    </div> 
 
</form>