JavaScript 表单验证功能不起作用

Question

我想验证此表单，并且我编写了 JavaScript，但是当我按提交时，它没有执行任何操作。

只有pattern=[a-zA-Z]有效

function validation() {
  var name = document.getElementById('name').value;
  var surname = document.getElementById('surname').value;
  var message = document.getElementById('message').value;
  var email = document.getElementById('email').value;

  if (name == '' || surname == '' || message == '' || email == '') {
    document.getElementById("eresult").innerHTML = "All fields required"
    return false;
  } else if (name.length < 2) {
    document.getElementById("eresult").innerHTML = "Name must be atleast 2 charachters"
  } else {
    return true;
  }
}

<aside id="sidebar">
  <div class="dark">
    <form action="#" name="form" method="POST" onsubmit="return validation();">
      <h3>Get A Quote</h3>

      <div>
        <label>Name</label><br>
        <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*">
      </div>
      <div>
        <label>Surname</label><br>
        <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*">
      </div>

      <div>
        <label>Email</label><br>
        <input type="email" name="email" id="email" placeholder="Email Address">
      </div>

      <div>
        <label>Message</label><br>
        <textarea type="message" name="message" id="email" minlength="1" maxlength="200" placeholder="Message(max 200 characters)"></textarea>
      </div>

      <input type="submit" name="submit" value="Submit">
    </form>
    <div id="eresult" style="color:red;"></div>
  </div>
</aside>
<footer>
  <p>Renars Web Design, Copyright &copy; 2019</p>
</footer>

我希望如果我不输入所有字段，它应该显示“所有字段必填” 但它只是提交表单。

Answer 1

使用“required”属性:

如果您想强制输入，只需将 required 属性添加到每个输入即可。

设置此属性后，当输入为空时(输入也将被视为无效)，表单将不会提交(并会显示错误消息)。

---

检查以下代码片段，并尝试在不填写部分或全部字段的情况下提交表单，以了解 required 属性的工作原理:

<form action="#" name="form" method="POST">
  <div>
    <label>Name</label><br>
    <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*" required>
  </div>
  <div>
    <label>Surname</label><br>
    <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*" required>
  </div>

  <div>
    <label>Email</label><br>
    <input type="email" name="email" id="email" placeholder="Email Address" required>
  </div>

  <div>
    <label>Message</label><br>
    <textarea type="message" name="message" id="email" minlength="1" maxlength="200" placeholder="Message(max 200 characters)" required></textarea>
  </div>
  <input type="submit" name="submit" value="Submit">
</form>

---

使用 JavaScript 函数:

您需要在 JS 和 HTML 中修复一些问题:

1. 将 input type="submit" 更改为 button type="button"，以便提交按钮将首先运行该函数，而不是直接尝试提交表单。另外，请确保更改 name 属性值和 id 属性值submit 到其他内容，例如 submitBtn 或 submitForm，以便您可以手动运行函数后面的 submit() 方法。
2. 添加一个 ID 为 “eresult” 的元素，验证函数可以将错误消息推送到其中。
3. 向提交按钮添加点击监听器以运行验证函数。
4. 将 textarea 元素的 id 属性值更改为 message.
5. 使用您已有的相同 if/else 语句，但将 return false; 添加到您的else if 语句，并将 form.submit() 添加到最终的 else 语句位于 return true; 上方。

注意 我们之前必须更改提交按钮的 name 和 id 属性，以便 form.submit () 将引用 submit() 方法，而不是验证函数中的提交按钮。

---

检查并运行以下代码片段，作为我上面描述的实际示例:

/* JavaScript */

document.querySelector("button").addEventListener("click", function(){
  var name = document.getElementById('name').value;
  var surname = document.getElementById('surname').value;
  var message = document.getElementById('message').value;
  var email = document.getElementById('email').value;
  if(name=='' || surname=='' || message=='' || email==''){
    document.getElementById("eresult").innerHTML = "All fields required"
    return false;
  }
  else if(name.length<2){
    document.getElementById("eresult").innerHTML = "Name must be atleast 2 charachters"
    return false;
  }

  else{
    form.submit();
    return true;
    
  }
});

<!-- HTML -->

<form action="#" name="form" method="POST">
  <div>
    <label>Name</label><br>
    <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*">
  </div>
  <div>
    <label>Surname</label><br>
    <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*">
  </div>

  <div>
    <label>Email</label><br>
    <input type="email" name="email" id="email" placeholder="Email Address">
  </div>

  <div>
    <label>Message</label><br>
    <textarea type="message" name="message" id="message" minlength="1" maxlength="200" placeholder="Message(max 200 characters)"></textarea>
  </div>
  <button type="button" name="submitBtn">Submit</button>
</form>
<div id="eresult"></div>