表单提交，即使它没有通过 JavaScript 通过验证答案

【问题标题】：Form submits even though it is not passing validation through JavaScript表单提交，即使它没有通过 JavaScript 通过验证
【发布时间】：2021-03-31 04:00:48
【问题描述】：

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

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>

【问题讨论】：

尝试使用 e.preventDefault()

标签： javascript html forms validation

【解决方案1】：

你没有返回结果变量

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

【讨论】：

我已经尝试过了，无论出于何种原因，表单仍在提交。我使用了五个函数，而不是本示例中的两个，但结构相同。

【解决方案2】：

你应该返回结果。

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

  };




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


  return 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"><br>
    </li>
    <li>
        <label for="phonenumber">Phone Number:</label><br>
        <input type="text" id="phonenumber" name="phonenumber">    
    </li>

    </ul>

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

    </form>

</body>

【讨论】：