提交表单验证。即使有错误也可以提交表格

时间:2019-04-01 10:53:55

标签: javascript html dom

我创建了一个注册页面,每个字段都需要输入和验证。如果字段为空,我使用onsubmit事件调用我的js函数来验证表单,但是即使未正确验证该字段仍会提交。

function validate() {
  var streetName = document.getElementById("sN").value;


  if (streetName == "" || streetName == null || streetName == undefined) {
    window.alert("Sorry");
    return false;
  }
}
<form name="myForms" action="https://httpbin.org/post " method="post" class="form" onsubmit="return validate()">

  <div id="fN">
    <label>First Name</label>
    <input type="text" name="firstName" placeholder="Enter first name" required>
  </div>

  <br>

  <div class="lN">
    <label>Last Name</label>
    <input type="text" name="lastName" placeholder="Enter last name" required="">
  </div>

  <br>

  <div class="sN">
    <label>Street name</label>
    <input type="text" name="streetname" placeholder="Enter your street name">
  </div>



  // Somemore inputs

  <input class="buttons" type="submit" name="submit" value="Sign up" onclick="validate()">

</form>

我希望弹出一个窗口,提示“此条目是错误的,并且由于这个原因”,但是无论如何它都会提交

编辑:对不起,我应该在我的帖子中更加清楚。我将在某些输入中使用required,但是最终我将需要编写js代码,以确保电话号码是全数字,而password = passwordconfirm,邮政编码是实际的邮政编码。在JS文件中,我只是显示了我基本上尝试做的事情。

2 个答案:

答案 0 :(得分:0)

var streetName = document.getElementById("sN").value;

文档中没有id元素。

存在一个以sN作为其类名的元素,但是getElementById找不到按其类和{{ 1}}将始终value<div class="sN">将具有一个值。

答案 1 :(得分:0)

几件事

  1. 您已经在提交和表单上进行了验证
  2. 您永远不要以“提交”的形式调用任何东西,因为它会隐藏提交事件/方法
  3. 您需要获取正确的字段
  4. 给表单一个ID并使用像这样的简洁代码

window.addEventListener("load", function() {
  document.getElementById("myForm").addEventListener("submit", function(e) {
    var errors = false;
    var streetName = this.streetname.value.trim(); // no more action needed
    if (!streetName) errors = true;
    // more validations
    if (errors) {
      window.alert("Sorry");
      e.preventDefault();
    }  
  });
});
<form id="myForm" action="https://httpbin.org/post " method="post" class="form">
  <div id="fN">
    <label>First Name</label>
    <input type="text" name="firstName" placeholder="Enter first name" >
  </div>

  <br>

  <div class="lN">
    <label>Last Name</label>
    <input type="text" name="lastName" placeholder="Enter last name" >
  </div>

  <br>

  <div class="sN">
    <label>Street name</label>
    <input type="text" name="streetname" placeholder="Enter your street name">
  </div>

  <input class="buttons" type="submit" name="SubmitButton" value="Sign up">

</form>