如何從表單提交中創建簡單的JavaScript錯誤信息？

我是JavaScript新手，購買了Jon Duckett的書，但我不是他描述創建/顯示錯誤消息方式的粉絲 - 有人可以告訴我如何在NAME字段留空的情況下顯示錯誤消息嗎？謝謝。下面是我的表單的HTML：如何從表單提交中創建簡單的JavaScript錯誤信息？

<form action="form.php" method="post"> 
<fieldset> 
<legend>Your Details&#58;</legend> 
<label for="name">Name&#58;</label><br> 
<input type="text" name="name" id="name" required="required"><br> 
<label for="email">Email&#58;</label><br> 
<input type="text" name="email" id="email"><br> 
<label for="telephone">Telephone&#58;</label><br> 
<input type="text" name="telephone" id="telephone"> 
</fieldset> 
<br> 
<fieldset> 
<legend>Your Information&#58;</legend> 
<p> 
<label for="service">What service are you inquiring about?</label> 
<select name="service" id="service"> 
<option value="Collision">Collision</option> 
<option value="Mechanical">Mechanical</option> 
<option value="Custom">Custom</option> 
<option value="Other">Other</option> 
</select> 
</p> 
<label for="comments">Comments&#58;</label> 
<br> 
<textarea name="comments" id="comments" rows="4" cols="40"></textarea>.  
<input type="submit" value="Submit"/> 
</fieldset> 
</form>

來源

2017-04-20 t_strudel

他描述實現它的方式是什麼？ _you_是如何實現的？你碰到什麼錯誤/問題？如果你說的「不是粉絲」，這並不意味着作者的方法論是錯誤的，而是要求其他人爲你寫代碼，這是無關緊要的。 – chazsolo

結帳這個鏈接，這個鏈接顯示瞭如何做一個簡單的JavaScript表單驗證

https://www.w3schools.com/js/js_validation.asp

HTML代碼

<form name="myForm" onsubmit="return validateForm()" action="form.php" method="post"> 
<fieldset> 
<legend>Your Details&#58;</legend> 
<label for="name">Name&#58;</label><br> 
<input type="text" name="name" id="name"><br> 
<label for="email">Email&#58;</label><br> 
<input type="text" name="email" id="email"><br> 
<label for="telephone">Telephone&#58;</label><br> 
<input type="text" name="telephone" id="telephone"> 
</fieldset> 
<br> 
<fieldset> 
<legend>Your Information&#58;</legend> 
<p> 
<label for="service">What service are you inquiring about?</label> 
<select name="service" id="service"> 
<option value="Collision">Collision</option> 
<option value="Mechanical">Mechanical</option> 
<option value="Custom">Custom</option> 
<option value="Other">Other</option> 
</select> 
</p> 
<label for="comments">Comments&#58;</label> 
<br> 
<textarea name="comments" id="comments" rows="4" cols="40"></textarea>.  
<input type="submit" value="Submit"/> 
</fieldset> 
</form>

JavaScript代碼

function validateForm() { 
    var x = document.forms["myForm"]["name"].value; 
    if (x === "") { 
     alert("Name must be filled out"); 
     return false; 
    } 
}

入住這裏的功能 https://codepen.io/anon/pen/QvNGMZ

來源

2017-04-20 15:50:14

謝謝，我在看鏈接。這部分代碼對document.forms意味着什麼？ var x = document.forms [「myForm」] [「fname」] .value; –

該部分將獲得用戶在HTML表單中輸入到JavaScript部分的值，並將其存儲在變量x中，因此可以將此變量用於驗證。「myForm」是表單的名稱，可以通過將name屬性設置爲表單標籤來指定。「fname」是你的情況下輸入字段的名稱，它是「名稱」。 –

我已編輯我的答案檢查出來。 :) –

你必須創建一個新元素（跨度，DIV ...），寫一個錯誤到它，你的表單域，前\後該元素添加其中發生錯誤。作爲一種好的方法，您可以創建一個對象，例如{fieldName:{errorMessage,validationRule}}，其中是fieldName - 是您的字段名稱，您需要驗證，errorMessage - 是錯誤，您在錯誤中顯示，並且validationRule - 是regexp，例如，告訴你如何驗證該字段。或者你可以硬編碼所有這些參數。 :)

P.s.有很多方法來驗證表單，獲取錯誤並顯示它們。你可以很容易地搜索它，併爲自己選擇最好的。

來源

2017-04-20 15:50:28 Brissy

如何從表單提交中創建簡單的JavaScript錯誤信息？

回答

相關問題