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

Question

我是JavaScript的新手，购买了Jon Duckett的书，但不喜欢他描述的创建/显示错误消息的方式 - 可以告诉我如何仅显示错误消息如果名称字段是空的？谢谢。以下是我的表格的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

您必须创建一个新元素(跨度，div ...(，并在其中写入错误，然后在表单字段之前之后添加该元素，这将其介入该错误。作为一个好方法，您可以制作一个对象，例如 {fieldName:{errorMessage,validationRule}}，fieldname是您的字段名称，您需要验证，并且errormessage是错误 - 您在错误中显示的错误，而验证性 - 例如，regexp是，告诉您如何验证该领域。或者，您可能会进行硬码所有这些参数。：(

P.S。有很多方法可以验证形式，获取错误并显示它们。您可能真的很容易搜索它并为自己选择最好的。