无法让 JavaScript 表单验证工作

Question

I have my HTML Form setup with an external JS File linked to it:

<script type="text/javascript" src ="../a1/js/formvalid.js"></script>

The HTML & JS are as follows:

 function validateForm() { // user inputs var firstname = document.getElementById("firstname").value; var surname = document.getElementById("lastname").value; var email = document.getElementById("email").value; if (firstname == "") { document.getElementById("firstnameError"). style.display = "inline"; return false; } else if (surname == "") { document.getElementById("lastnameError"). style.display = "inline"; return false; } }

 <div id="grid-container"> <h3>Enter your Details Below</h3> <form id="registration_form" action="" onsubmit="return validateForm()"> <:-- Name/Email Input --> <div><label for="firstname">First Name: </label><input type="text" name = "firstname" id="firstname"></div> <div class="error" id="firstnameError">Required: Please enter your first name</div><br> <div><label for="lastname">Last Name: </label><input type="text" name = "lastname" id="lastname"></div> <div class="error" id="lastnameError">Required: Please enter your Last name</div><br> <div><label for="email">Email: </label><input type="text" name = "email" id="email"></div> <div class="error" id="emailError">Required: Please enter your email</div> <input type="submit" value="Register"/> </form>

But whenever I submit, the JS doesn't work and instead it just submits the form. I've been able to make it work for other forms but it just doesn't want to work for this one. Anyone know what errors I'm facing? I used a JS Syntax validator and it said there were no errors.

Answer 1

You will need to prevent the form submission when the form is invalid. There are many posts on StackOverflow about this. Here is one: JavaScript code to stop form submission

The concept is that you return false from your validateForm() function to prevent submission. Additionally, you should prevent the default event from firing.

function validateForm(event) {
  event.preventDefault();
  ...
}

Answer 2

you have to make some changes in your HTML and javascript code.
Currently, I make some different code I think you like this thing.
In HTML code you have to change button click event.

<div id="grid-container">
  <h3>Enter your Details Below</h3>
  <form id="registration_form" action="">
    <div><label for="firstname">First Name: </label><input type="text" name = "firstname" id="firstname"></div>
    <div class="error" id="firstnameError">Required: Please enter your first name</div><br>
                    
    <div><label for="lastname">Last Name: </label><input type="text" name = "lastname" id="lastname"></div>
    <div class="error" id="lastnameError">Required: Please enter your Last name</div><br>
                    
    <div><label for="email">Email: </label><input type="text" name = "email" id="email"></div>
    <div class="error" id="emailError">Required: Please enter your email</div>
                    
    <input type="button" value="Register" onClick="validateForm()"/>
   </form>
</div>

Hear is your javascript code some little bit change:

    document.getElementById("firstnameError"). style.display = "none";
    document.getElementById("lastnameError"). style.display = "none";
    document.getElementById("emailError"). style.display = "none";
    function validateForm() 
    {
      document.getElementById("firstnameError"). style.display = "none";
      document.getElementById("lastnameError"). style.display = "none";
      document.getElementById("emailError"). style.display = "none";
      var firstname = document.getElementById("firstname").value;
      var surname = document.getElementById("lastname").value;
      var email = document.getElementById("email").value;
      var flagValidate = true;
      if (firstname == "") 
      { 
        document.getElementById("firstnameError"). style.display = "block";
        document.getElementById("firstnameError"). style.color = "red";
        flagValidate = false;
      }
    
      if (surname == "") 
      {   
        document.getElementById("lastnameError"). style.display = "block";
        document.getElementById("lastnameError"). style.color = "red";
        flagValidate = false;
      }
    
      if(email == "")
      {
        document.getElementById("emailError"). style.display = "block";
        document.getElementById("emailError"). style.color = "red";
        flagValidate = false;
      }
    
      if(flagValidate)
      {
        document.getElementById("registration_form").submit();
      }
  }