Can't get JavaScript form validation to work

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.

It does indeed call the `validateForm()` func - https://jsfiddle.net/tgp4kLfw/ — codemax, Aug 12 '20 at 04:19
Your code works fine - I've edited your question and added it into a runnable snippet so you can see. If this isn't what you want, what exactly do you want to happen? Also are you sure the JS file is being included correctly? — FluffyKitten, Aug 12 '20 at 04:21
That's weird that it works here but doesn't when I try to run it in a browser. — , Aug 13 '20 at 07:02

score 1 · Answer 1 · answered Aug 12 '20 at 04:20

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();
  ...
}

answered Aug 12 '20 at 04:20

ChrisG

2,637
18
20

1

The code in the question already uses `return` and the form is not being submitted as you would expect, and it's working fine, so I don't think `preventDefault` is going to add anything... – FluffyKitten Aug 12 '20 at 05:09

score 0 · Accepted Answer · answered Sep 09 '20 at 05:50

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

Can't get JavaScript form validation to work

2 Answers2