时间戳

首页 > 解决方案 > onsubmit 表单验证。即使有错误也提交表单

javascript - onsubmit 表单验证。即使有错误也提交表单

问题描述

我创建了一个注册页面，每个字段都需要输入和验证。如果字段为空，我使用 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 代码来确保电话号码是全数字，密码 = passwordconfirm 并且邮政编码是实际的邮政编码。在 JS 文件中，我只是展示了我基本上尝试过的操作。

标签： javascripthtmldom

解决方案

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

文档中没有那个元素id。

有一个元素sN以其类名，但getElementById不会通过其类找到一个元素，并且valueof<div class="sN">将始终是undefined。它将input具有价值。

推荐阅读