JavaScript表单验证功能不起作用 [英] JavaScript form validation function is not working

问题描述

我想验证此表单，并且编写了JavaScript，但是当我按 submit 时，它什么也没做.

I want to validate this form and I have the javascript written but when I press submit it doesnt do anything.

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

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

I expect if I dont enter all fields it should say "All Fields required" but it just submits the form.

推荐答案

使用必需"属性:

如果要使输入强制性，只需将 required 属性添加到每个输入.

Using the "required" attribute:

Just add the required attribute to each input if you want to make an input mandatory.

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

When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).

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

Check the following Code Snippet and try to submit the form without filling some or all of the fields to see how the required attribute works:

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

您需要在JS和HTML中修复几件事:

There are a couple of things that you need to fix in your JS as well as HTML:

1. 将您的 输入类型="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; .

1. Change your input type="submit" to button type="button" so that the submit button will run the function first instead of directly trying to submit the form. Also, make sure to change the name attribute value and id attribute value submit to something else, like submitBtn or submitForm so that you can manually run the submit() method later in the function.
2. Add an element with an id "eresult" where your validation function can push the error messages to.
3. Add a click listener to your submit button to run your validation function.
4. Change the id attribute value of your textarea element to message.
5. Use the same if/else statement that you already have but add a return false; to your else if statement too and add a form.submit() to your final else statement above the return true;.

NB 我们必须更早更改提交按钮的 name 和 id 属性，以便 form.submit()将引用 submit()方法，而不是验证功能中的提交"按钮.

N.B. We had to change the name and id attribute of your submit button earlier so that form.submit() will reference the submit() method and not the submit button in the validation function.

检查并运行以下代码段，以获取上述内容的实际示例:

Check and run the following Code Snippet for a practical example of what I had described above:

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

这篇关于JavaScript表单验证功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！