JS authentication for HTML page

Question

I want to add a basic name and email validation JS script to an HTML page, so when submit is pressed it will check multiple fields and throw errors if any are filled incorrectly. Unfortunately, when submit is pressed the page just reloads with fields empty and no error is thrown on the HTML page.

I am still learning JS.

Here is my JS snippet to check for name and email:

//Check if name is anything other than letters or spaces. If it isn't throw error.
function validateForm() {
  var validEntry = /[a-zA-Z ]/;
  var x = document.forms["clientinfo"]["txtFullName"].value;
  if (x.value.match(!validEntry)) {
    alert("Invalid name. Please try again.");
    document.clientinfo.txtFullName.focus();
    return false;
  }
  // Check if email is in proper format - words@words.com. If it isn't throw error.
  var y = document.forms["clientinfo"]["txtEmail"].value;
  var validEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})/
  if (y.value.match(validEmail)) {
    return true
  } else {
    alert("Invalid email. Please try again.")
    document.clientinfo.txtEmail.focus();
    return false;
  }
}

<div id="inputArea">
  <form name="clientinfo" onsubmit="return validateForm()" method="post">
    Name:
    <input class="Inputinfo" type="text" name="txtFullName" placeholder="John Stewart" required>
    <br> Email:
    <input class="Inputinfo" type="text" name="txtEmail" placeholder="john@example.com" required>
    <br> Phone:
    <input class="Inputinfo" type="tel" name="phone" placeholder="XXX-XXX-XXXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
    <br> Description:
    <br>
    <textarea class="Inputinfo" id="txtDescription" name="description" rows="8" cols="50" placeholder="Please enter any additional client information here."></textarea>
    <br>
    <input type="submit" value="Enter" id="enterbutton">
  </form>
</div>

How can I fix this problem?

You need to prevent the form's default action (which includes reloading the screen) in your function by passing in the event and then calling `event.preventDefault();` — mykaf, Feb 14 '23 at 21:26
Does this answer your question? [preventDefault() stops form validation](https://stackoverflow.com/questions/44372822/preventdefault-stops-form-validation) — blurfus, Feb 14 '23 at 21:27
That's not needed. If an `onXXX` attribute returns false, the default action is prevented. So `return validateForm()` does the same thing. @mykaf — Barmar, Feb 14 '23 at 21:27
`if (x.value.match(!validEntry))` should be `if (!x.value.match(validEntry))`. You also need to change the regexp so it tests the entire input. — Barmar, Feb 14 '23 at 21:29

score 3 · Accepted Answer · answered Feb 14 '23 at 21:38

!validEntry is false, so you're testing x.value.match(false) in your first if statement. What you want is if (!x.value.match(validEntry)) and you have to change the regexp to match the entire input string (it currently looks for a match of the valid characters anywhere in the input.

x.value and y.value should just be x and y. You already used .value when you assigned the variables, so they contain strings, not the input elements.

To make it easier to keep adding more validations, don't do return true when the email is valid. Put that at the end of the function, and just do return false in each of the invalid cases.

//Check if name is anything other than letters or spaces. If it isn't throw error.
function validateForm() {
  var validEntry = /^[a-zA-Z ]+$/;
  var x = document.forms["clientinfo"]["txtFullName"].value;
  if (!x.match(validEntry)) {
    alert("Invalid name. Please try again.");
    document.clientinfo.txtFullName.focus();
    return false;
  }
  // Check if email is in proper format - words@words.com. If it isn't throw error.
  var y = document.forms["clientinfo"]["txtEmail"].value;
  var validEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})$/
  if (!y.match(validEmail)) {
    alert("Invalid email. Please try again.")
    document.clientinfo.txtEmail.focus();
    return false;
  }
  
  return true;
}

<div id="inputArea">
  <form name="clientinfo" onsubmit=" validateForm(); return false" method="post">
    Name:
    <input class="Inputinfo" type="text" name="txtFullName" placeholder="John Stewart" required>
    <br> Email:
    <input class="Inputinfo" type="text" name="txtEmail" placeholder="john@example.com" required>
    <br> Phone:
    <input class="Inputinfo" type="tel" name="phone" placeholder="XXX-XXX-XXXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
    <br> Description:
    <br>
    <textarea class="Inputinfo" id="txtDescription" name="description" rows="8" cols="50" placeholder="Please enter any additional client information here."></textarea>
    <br>
    <input type="submit" value="Enter" id="enterbutton">
  </form>
</div>

JS authentication for HTML page

1 Answers1