Question

我是JavaScript的新手，买了Jon Duckett的书，但他并不喜欢他描述创建/显示错误消息的方式 - 如果NAME字段留空，有人可以告诉我如何显示错误消息吗？谢谢。以下是我的表单的HTML：

<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>

Answer 1

查看此链接，此链接显示了如何进行简单的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

Answer 2

你必须创建一个新元素（span，div ...），并在其中写入一个错误，然后在表单字段之后将该元素追加到表单字段之后，这会使该错误发生。作为一种好方法，你可以创建一个对象，比如{fieldName:{errorMessage,validationRule}}，whereName是你的字段名，你需要验证，而errorMessage - 是错误，你在错误时显示，而validationRule - 是regexp，例如，告诉你如何验证该字段。或者你可以硬编码所有这些参数。：）

P.S。有很多方法可以验证表单，获取错误并显示错误。你可以很容易地搜索它并为自己选择最好的。

如何从表单提交中创建简单的JavaScript错误消息？

2 个答案: