Prevent submit form if email not validated using my function

Question

I am using a function to validate emails in a form. The function works fine as it does return an error message when a user types an invalid email address and leaves the field box. However, even if the email is not valid, they could still submit the form.

How can I prevent that from happening?

// Email validation and error message
function validateEmail(emailField) {
 var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

 if (reg.test(emailField.value) == false) {

  errorEmail.innerText = 'Looks like this is not an email';
  return false;
 }
 {
  // e.preventDefault();

  errorEmail.innerText = "";
  return true;
 }
}

<form id="form" class="form" action="https://formspree.io/mzbdlwlb" method="POST">
        <input id="FirstName" type="text" placeholder="First Name" name="FirstName" />
        <input id="LastName" type="text" placeholder="Last Name" name="LastName" />

        <!-- This is to show an error when email is not validated -->
        <div id="error-Email"></div>
        <input id="EmailAddress" type="text" placeholder="Email Address" onblur="validateEmail(this);"
          name="EmailAddress" />
        <input id="Password" type="password" placeholder="Password" name="Password" />
        <input onclick="update()" id=" submit" type="submit" value="Claim your free trial" name="Submit" />
      </form>

The form will always post if you don't intercept the default action. There are a lot of ways you can do this. The `onsubmit` attribute is a good method or you can bind an event listener to the form in javascript. No matter how you fire the event you will need to include the `preventDefault()` method in the case where you want to prevent the form from posting. — tshimkus, Jan 08 '20 at 00:03
There are several options and many helpful resources available. Check out MDN: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation, this other SO answer: https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted, or even this JS-free suggestion: https://webdevtrick.com/html-css-form-validation/ — Cat, Jan 08 '20 at 00:06
Does this answer your question? [How to prevent form from being submitted?](https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) — Cat, Jan 08 '20 at 00:07
@Shizukura it changes the color of the placeholder to red when form is submitted and the fields are left empty. — Hesam Alavi, Jan 08 '20 at 00:17

jeprubio · Answer 1 · 2020-01-08T00:06:13.693

-1

Use form onsubmit

w3schools.com/jsref/event_onsubmit.asp

<form onsubmit="return validateEmail(document.getElementById('EmailAddress'))"
    id="form" class="form" action="https://formspree.io/mzbdlwlb" method="POST">

And, in this case, validateEmail should return false when the form should not be submitted. Which is the case.

Even though I would move the document.getElementById('EmailAddress') inside the validateEmail method and not pass it through parameter.

edited Jan 08 '20 at 00:06

answered Jan 08 '20 at 00:04

jeprubio

17,312
5
45
56

1

That won't work. The `onsubmit` function doesn't return anything. – Quentin Jan 08 '20 at 00:04
Too quick, I forgot the return, my fault, thanks – jeprubio Jan 08 '20 at 00:07
@jeprubio that did prevent the form from submitting which is great, however, if the user clicks the submit button before doing anything else, the error now shows, whereas I would like the error ("this is not an email") to only come when the user attempts to type in the email field, and does not type in a valid email. – Hesam Alavi Jan 08 '20 at 00:23
@HesamAlavi Sorry, I was sleeping. Have you removed `onblur="validateEmail(this);"` of the input? Leave it, you need both validations then. – jeprubio Jan 08 '20 at 08:12

Prevent submit form if email not validated using my function

1 Answers1