Question

我是JavaScript新手。我知道如何创建一个警告框，如果一个字段在HTML表单中保留为空，现在创建一条错误消息，但有人可以告诉我如果多个字段为空，如何显示多个错误消息？下面是我的表单和JavaScript的HTML代码：

<form action="form.php" method="post" name="contactform" 
onsubmit="return validateForm()">
<fieldset>
<legend>Your Details&#58;</legend>
<label for="name">Name&#58;</label><br>
<input type="text" name="name" id="name" onblur="validateForm()"><br>
<span id="error"></span>
<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><br>    
<input type="submit" value="Submit"/>
</fieldset>
<script src="validate.test.js"></script>
</form>

function validateForm() 
{
var name = document.forms["contactform"]["name"].value;
if (name == "")
{
document.getElementById('error').innerHTML="Please enter your name";
return false;
}
}

Answer 1

您需要通过脚本代码包围JavaScript代码。

<script type="text/javascript">

   function validateForm() 
   {
      var name = document.forms["contactform"]["name"].value;
      if (name == "")
      {
         document.getElementById('error').innerHTML="Please enter your 
                  name";
         return false;
       }
    }

</script>

Answer 2

一种简单的方法是在required HTML元素上使用input属性。它指定在提交表单之前必须填写输入字段。

<form action="form.php" method="post" name="contactform" 
onsubmit="return validateForm()">
<fieldset>
<legend>Your Details&#58;</legend>
<label for="name">Name&#58;</label><br>
<input type="text" name="name" id="name" required><br>
<span id="error"></span>
<label for="email">Email&#58;</label><br>
<input type="text" name="email" id="email" required><br>
<label for="telephone" required>Telephone&#58;</label><br>
<input type="text" name="telephone" id="telephone" required>
  <input type="submit">
</fieldset>

另一种方法是使用您在代码段中描述的javascript。如果您需要为每个字段自定义错误消息，这非常有用。

Answer 3

如果@alpeshpandya和@Agalo的答案解决了您的问题（即使没有）：

我认为您尝试仅验证名称输入，即使用户忘记填写它也是如此。输入失去焦点时会触发onblur事件。您有以下选择：1。您可以在用户点击提交表单时进行验证，或者将validateForm放入其他输入 onblur ， 3.或别的什么。

在提交表单时进行验证：验证整个内容并立即设置所有错误消息的好方法。
使用 onfocus 进行验证：在每个输入中，您必须在用户时验证其他 点击它（使用onfocus或其他事件），例如，当用户尝试转到另一个输入时，您的错误消息将会弹出。

创建多个JavaScript错误消息联系表单？

3 个答案: