JavaScript表单验证功能不起作用

Question

我想验证这个表单,我写了javascript但是当我按下submit它什么也没做.

只有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. id将textarea元素的属性值更改为message.
5. 使用与现有相同的内容if/else statement,但return false;也要在else if语句中添加一个form.submit(),并在else上面的最后一个语句中添加一个return true;.

NB 我们不得不改变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>