I have a form which lets the user to enter the email address twice. i need to validate that the email is like the regex and that the two emails match.

Something is wrong with my code. Please note that i am restricted to use javascript only. Thanks, this is my javascript

function checkEmail(theForm) {

    var re = /^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@"+"[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$/i;

    if (theForm.EMAIL_1.value != re) {
        alert('invalid email address');
        return false;
    } else if (theForm.EMAIL_1.value != theForm.EMAIL_2.value) {
        alert('Those emails don\'t match!');
        return false;
    } else {
        return true;
    }
}

I have a form which lets the user to enter the email address twice. i need to validate that the email is like the regex and that the two emails match.

Something is wrong with my code. Please note that i am restricted to use javascript only. Thanks, this is my javascript

function checkEmail(theForm) {

    var re = /^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@"+"[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$/i;

    if (theForm.EMAIL_1.value != re) {
        alert('invalid email address');
        return false;
    } else if (theForm.EMAIL_1.value != theForm.EMAIL_2.value) {
        alert('Those emails don\'t match!');
        return false;
    } else {
        return true;
    }
}

• javascript

Share Improve this question Follow edited May 4, 2015 at 0:18 Han 44955 silver badges1818 bronze badges asked May 3, 2015 at 23:45 ladyBugladyBug 8922 silver badges99 bronze badges 2

• "something is wrong with my code." What exactly is wrong? – Felix Kling Commented May 3, 2015 at 23:47
• Also, that is one funky looking email regex. I have great doubts it would match any valid email address. You can search the web for a solid email regex rather than home brew it. – steve klein Commented May 3, 2015 at 23:52

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Your issue your not actually performing a regex. Your just paring a regex string to an email.

if(theForm.EMAIL_1.value != re) /// <--- wrong. 
{ 
    alert('invalid email address');
return false;
}

• On errors, use Event.preventDefault(); to prevent the form submit
• Check for email validity only on the first input value
• Than check to string equality on both input fields

function checkEmail (event) {
  const e1 = this.EMAIL_1.value;
  const e2 = this.EMAIL_2.value;
  //Email Regex from //stackoverflow./a/46181/383904
  const re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
  const isEmail = re.test( e1 );
  const isMatch = e1 === e2;
  if( !isEmail ){
    event.preventDefault();
    alert('Invalid email address');
  }
  else if ( !isMatch ){
    event.preventDefault();
    alert("Those emails don't match!");
  }
}

document.querySelector("#theForm").addEventListener("submit", formSubmitHandler);

<form id="theForm">
  Email address:<br>
  <input name="EMAIL_1" type="text"><br>
  Confirm Email address:<br>
  <input name="EMAIL_2" type="text"><br>
  <input type="submit">
</form>

Since you might have more forms where an email is required (Contact form, Login form, Newsletter form, etc etc...) for more modularity you could create a reusable function for validation and than a specific form submit handler separately:

/**
 * @param {string} a Email address 1
 * @param {string} b Email address 2
 * @return {string} Error message
 */
function invalidEmails (a, b) {

  a = a.trim();
  b = b.trim();
  if (!a || !b) return "Missing email"; 
  
  // Email Regex from stackoverflow./a/46181/383904
  const re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
  const isEmail = re.test(a);
  const isMatch = a === b;
  
  if      (!isEmail) return "Invalid email";
  else if (!isMatch) return "Emails do not match";
}


// Handle your form here
function formSubmitHandler (evt) {
  const is_emails_invalid = invalidEmails(this.EMAIL_1.value, this.EMAIL_2.value);
  if (is_emails_invalid) {
    evt.preventDefault();      // Prevent form submit
    alert(is_emails_invalid);  // Show error message
  }
}

document.querySelector("#theForm").addEventListener("submit", formSubmitHandler);

<form id="theForm">
  Email address:<br>
  <input name="EMAIL_1" type="text"><br>
  Confirm Email address:<br>
  <input name="EMAIL_2" type="text"><br>
  <input type="submit">
</form>

You cant pare the first value with a regex. You have to use a regexp object. For more information read at

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec

Try this below function to validate your email. And after the validation, pare the 2nd email.

Please note that regex test method is used in the validateEmail method.

function validateEmail(email) {
    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    return re.test(email);
}

The below should work perfectly!

function validateForm(theForm) {

    if (theForm.Email_1.value != theForm.Email_2.value)
    {
        alert('Emails don\'t match!');
        return false;
    } else {
        return true;
    }
}