JavaScript form validation function is not working

Question

I want to validate this form and I have the javascript written but when I press submit it doesnt do anything.

Only the pattern=[a-zA-Z] work

function validation() {
  var name = document.getElementById('name').value;
  var surname = document.getElementById('surname').value;
  var message = document.getElementById('message').value;
  var email = document.getElementById('email').value;

  if (name == '' || surname == '' || message == '' || email == '') {
    document.getElementById("eresult").innerHTML = "All fields required"
    return false;
  } else if (name.length < 2) {
    document.getElementById("eresult").innerHTML = "Name must be atleast 2 charachters"
  } else {
    return true;
  }
}

<aside id="sidebar">
  <div class="dark">
    <form action="#" name="form" method="POST" onsubmit="return validation();">
      <h3>Get A Quote</h3>

      <div>
        <label>Name</label><br>
        <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*">
      </div>
      <div>
        <label>Surname</label><br>
        <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*">
      </div>

      <div>
        <label>Email</label><br>
        <input type="email" name="email" id="email" placeholder="Email Address">
      </div>

      <div>
        <label>Message</label><br>
        <textarea type="message" name="message" id="email" minlength="1" maxlength="200" placeholder="Message(max 200 characters)"></textarea>
      </div>

      <input type="submit" name="submit" value="Submit">
    </form>
    <div id="eresult" style="color:red;"></div>
  </div>
</aside>
<footer>
  <p>Renars Web Design, Copyright &copy; 2019</p>
</footer>

I expect if I dont enter all fields it should say "All Fields required" but it just submits the form.

Why don't you use required tag instead of a javascript function? — Shahroozevsky
– Shahroozevsky, Commented Jan 16, 2019 at 11:26
Try to get the form fields like var name = document.forms["form"]['name'].value; . codepen.io/binishjohn/pen/zyXxpz — Binish Mookken
– Binish Mookken, Commented Jan 16, 2019 at 11:34

AndrewL64 · Accepted Answer · 2019-01-16 12:09:02Z

Using the "required" attribute:

Just add the required attribute to each input if you want to make an input mandatory.

When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).

Check the following Code Snippet and try to submit the form without filling some or all of the fields to see how the required attribute works:

<form action="#" name="form" method="POST">
  <div>
    <label>Name</label><br>
    <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*" required>
  </div>
  <div>
    <label>Surname</label><br>
    <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*" required>
  </div>

  <div>
    <label>Email</label><br>
    <input type="email" name="email" id="email" placeholder="Email Address" required>
  </div>

  <div>
    <label>Message</label><br>
    <textarea type="message" name="message" id="email" minlength="1" maxlength="200" placeholder="Message(max 200 characters)" required></textarea>
  </div>
  <input type="submit" name="submit" value="Submit">
</form>

Using a JavaScript function:

There are a couple of things that you need to fix in your JS as well as HTML:

Change your input type="submit" to button type="button" so that the submit button will run the function first instead of directly trying to submit the form. Also, make sure to change the name attribute value and id attribute value submit to something else, like submitBtn or submitForm so that you can manually run the submit() method later in the function.
Add an element with an id "eresult" where your validation function can push the error messages to.
Add a click listener to your submit button to run your validation function.
Change the id attribute value of your textarea element to message.
Use the same if/else statement that you already have but add a return false; to your else if statement too and add a form.submit() to your final else statement above the return true;.

N.B. We had to change the name and id attribute of your submit button earlier so that form.submit() will reference the submit() method and not the submit button in the validation function.

Check and run the following Code Snippet for a practical example of what I had described above:

/* JavaScript */

document.querySelector("button").addEventListener("click", function(){
  var name = document.getElementById('name').value;
  var surname = document.getElementById('surname').value;
  var message = document.getElementById('message').value;
  var email = document.getElementById('email').value;
  if(name=='' || surname=='' || message=='' || email==''){
    document.getElementById("eresult").innerHTML = "All fields required"
    return false;
  }
  else if(name.length<2){
    document.getElementById("eresult").innerHTML = "Name must be atleast 2 charachters"
    return false;
  }

  else{
    form.submit();
    return true;
    
  }
});

<!-- HTML -->

<form action="#" name="form" method="POST">
  <div>
    <label>Name</label><br>
    <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*">
  </div>
  <div>
    <label>Surname</label><br>
    <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*">
  </div>

  <div>
    <label>Email</label><br>
    <input type="email" name="email" id="email" placeholder="Email Address">
  </div>

  <div>
    <label>Message</label><br>
    <textarea type="message" name="message" id="message" minlength="1" maxlength="200" placeholder="Message(max 200 characters)"></textarea>
  </div>
  <button type="button" name="submitBtn">Submit</button>
</form>
<div id="eresult"></div>

But if I wanted to do this with Javascript ( I know it is way longer and unnecasary) then what is wrong with my code?

Curlas · Accepted Answer · 2019-01-16 11:36:17Z

0

You have an error in your code. View the console error log.

You have an incorrect id in the message textarea.

In other words, "email" identifier is duplicated.

answered Jan 16, 2019 at 11:36

Curlas

8995 silver badges14 bronze badges

Collectives™ on Stack Overflow

JavaScript form validation function is not working

2 Answers 2

Using the "required" attribute:

Using a JavaScript function:

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Using the "required" attribute:

Using a JavaScript function:

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related