Javascript form validation only working once

Question

Script: NewsletterScript.js

function formValidation() {
    var fname = document.getElementById('firstName').value;
    var lname = document.getElementById('lastName').value;
    var pnumber = document.getElementById('phoneNumber').value;
    var email = document.getElementById('e-mail').value;
  if (FirstName(fname)) {
  }
  if (LastName(lname)) {
  }
  if (Country(country)) {
  }
  if (Email(email)) {
  }
  return false;
}
/*first name input validation*/
function FirstName(fname) {
  var message = document.getElementsByClassName("error-message");
  var letters = /^[A-Za-z]+$/;
  if ( fname =="" || fname.match(letters)) {
    text="";
    message[0].innerHTML = text;
    return true;
  }
  else {
    text="First name should contain only letters";
    message[0].innerHTML = text;
    return false;
  }
}
/*last name input validation*/
function  LastName(lname) {
  var message = document.getElementsByClassName("error-message");
  var letters = /^[A-Za-z]+$/;
  if ( lname =="" || lname.match(letters)) {
    text="";
    message[1].innerHTML = text;
    return true;
  }
  else {
    text="Last name should contain only letters";
    message[1].innerHTML = text;
    return false;
  }
}

I'm trying to get this validation to loop until the criteria is fulfilled, currently this is only working once and if the button is clicked again it submits regardless. Button below.

Due to the script being so long its not letting me upload all of it, however its just got other validation such as phone number etc, Any help will be appreciated, cheers!

Can you add a [mcve] to your question? I don't think this should prevent the form submission even at the first click. — Ivar, Nov 25 '20 at 10:58
onsubmit made it worse, wouldnt give the errors, only the required attributed worked — Baldip Singh Sahdra, Nov 25 '20 at 11:01
@Ivar I dont understand sorry not very familiar with stack overflow, the script gives the errors however if all fields are filled it only gives the error once and second click it submits all fields clear — Baldip Singh Sahdra, Nov 25 '20 at 11:03
briefly before the form refreshes the errors display then the form refreshes — Baldip Singh Sahdra, Nov 25 '20 at 11:03
@BaldipSinghSahdra Right, so your form is always submitted, regardless if it fails validation. Like Taha mentioned, you should use `onsubmit`. You cannot prevent form submission on a button click event. Also [you should add `return` inside of your event attribute](https://stackoverflow.com/questions/7814949/javascript-onclick-event-return-keyword-functionality). Also the bodies of your if-statements are empty, so it makes no difference whether they return true or false. — Ivar, Nov 25 '20 at 11:08
@Ivar could you give me an example of what should be inside the if statement — Baldip Singh Sahdra, Nov 25 '20 at 11:16
Also when I change the onclick to onsubmit the error messages stop displaying — Baldip Singh Sahdra, Nov 25 '20 at 11:21
See Dj0ulo's answer on how you could return false if one of your validation functions reutrn false. I can't really help you with onclick/onsubmit issues without knowing how it exactly looks like. That is why a [mcve] is very helpful. — Ivar, Nov 25 '20 at 11:27
Change `onClick="formValidation()"` to `onClick="formValidation"` — Marc, Nov 25 '20 at 11:28

score 1 · Accepted Answer · answered Nov 25 '20 at 11:26

If what you want is that formValidation() returns true only when the four validation functions return true you sould write that instead of putting empty if statements :

return FirstName(fname) && LastName(lname) && Country(country) && Email(email);

This manner formValidation() will return false if one of them return false

Glenn Ferrie · Answer 2 · 2021-05-27T13:33:53.220

0

You should consider using form onsubmit instead on the onclick on the submit button.

Instead of:

<input class="button" type="submit" value="Submit" name="submit" onClick="formValidation()" />

consider using the form submit and do not forget the return keyword:

<form onsubmit="return formValidation();" > /* ... */ </form>

Related Question: HTML form action and onsubmit issues

edited May 27 '21 at 13:33

answered May 27 '21 at 13:07

Glenn Ferrie

10,290
3
42
73

Javascript form validation only working once

2 Answers2