提问者:小点点

表单提交,即使它没有通过JavaScript进行验证


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

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

  
  function firstNameValid () {
  
    if (firstName == "") {
      alert("First name empty")
      return false;
    } else {
      return true;
    };
  
  };

  firstNameValid();

  
  function phoneValid () {

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

  phoneValid();

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

这是HTML

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

共2个答案

匿名用户

您没有返回结果变量

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

匿名用户

您应该返回结果。

null

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>