Question

我创建了一个注册页面，每个字段都需要输入和验证。如果字段为空，我使用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文件中，我只是显示了我基本上尝试做的事情。

Answer 1

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

文档中没有id元素。

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

Answer 2

几件事

您已经在提交和表单上进行了验证
您永远不要以“提交”的形式调用任何东西，因为它会隐藏提交事件/方法
您需要获取正确的字段
给表单一个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>

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

2 个答案: