时间戳

首页 > 解决方案 > 表单提交，即使它没有通过 JavaScript 验证

javascript - 表单提交，即使它没有通过 JavaScript 验证

问题描述

我正在制作一个简单的表格，并为每个字段制作了一个函数来验证。但是当我通过实时服务器测试表单时，即使字段未验证，表单也会提交。除此之外，每个功能似乎都按预期工作。

function validateForm () { 

  var firstName = document.getElementById('fname').value;
  var phoneNumber = document.getElementById('phonenumber').value;


  function firstNameValid () {

    if (firstName == "") {
      console.log("First name empty")
      return false;
    } else {
      return true;
    };

  };

  firstNameValid();


  function phoneValid () {

    if (phoneNumber == null || phoneNumber == "" || phoneNumber.length < 10) {
      console.log("Phone number must be defined and not exceed 10 characters")
      return false;
    } else {
      return true;
    }
  };

  phoneValid();


  result = firstNameValid() && phoneValid();

  };
 <body>

    <form name="registration" action="page2.html" onsubmit="return validateForm()" method="GET">

    <ul>

    <li>
        <label for="fname">First Name:</label><br>       
        <input type="text" id="fname" name="fname" onsubmit="return firstNameValid()"><br>
    </li>
    <li>
        <label for="phonenumber">Phone Number:</label><br>
        <input type="text" id="phonenumber" name="phonenumber" onsubmit="return phoneValid()">    
    </li>

    </ul>

    <button type="submit" value="Submit">Submit</button>

    </form>

    <script src="app.js"> </script>
</body>

标签： javascripthtmlformsvalidation

解决方案

您没有返回结果变量

result = firstNameValid() && phoneValid();
return result;

推荐阅读