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属性的工作原理：

<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中修复几件事：

将您的 input type="submit" 更改为 button type="button" ，以便“提交”按钮将首先运行该功能，而不是直接尝试提交表单。另外，请确保将 name 属性值和 id 属性值 submit 更改为某些值其他，例如 submitBtn 或 submitForm ，以便您稍后可以手动运行 submit() 方法功能。
添加一个ID为 "eresult" 的元素，您的验证功能可以将错误消息推送到该元素。
在您的“提交”按钮上添加一个点击侦听器，以运行验证功能。
将 id 元素的 textarea 属性值更改为 message 。
使用与您已有的相同的 if/else statement ，但将 return false; 添加到您的 else if >语句，并在最后一个 form.submit() 上方的 else 语句中添加 return true; 。< / li>

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

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

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;
    
  }
});

Answer 2

您的代码中有错误。查看控制台错误日志。

消息文本区域中的ID不正确。

换句话说，“电子邮件”标识符重复。

JavaScript表单验证功能不起作用

2 个答案:

使用“必需”属性：

使用JavaScript函数：