JS Student Email Validation

Question

I am a beginner in Javascript and am looking to find a solution to why the code below is not working.
I've reviewed several tutorials here on StackOverflow and believe it should work... but it's not.

The HTML looks like this:

<form id="personalInfo"> 
    <h2>Email: </h2>
    <input type="text" name="Email" id="Email">
    <br>
</form> 

<input type="button" onclick = "validateEmail()">

The Javascript looks like this:

function validateEmail() 
{
    var reg = /^([A-Za-z0-9_\-\.]){1,}\@([A-Za-z0-9_\-\.]){1,}\.([A-Za-z]{2,4})$/;
    var address = document.forms[personalInfo].elements[Email].value;

    if (reg.test(address) == false) {
        alert ("Email not valid");
        return false;
    }
    return true;
}

By my accounts, this should pop up an alert if the email address entered by the user is not valid.
Instead, nothing happens at all. I'm not sure if the test is even run.

Why are you returning `false` on a function called validateEmail, irregardless of if it's a valid email or not? — Shiny, Nov 23 '19 at 19:27
I was following this tutorial: https://www.youtube.com/watch?v=UKiy9H_CD0M I was assuming it's so that if the address doesn't match up with reg then it'll be returned as a bad email address. — JLP, Nov 23 '19 at 19:29
I would say move `return false` inside the if statement, and change the current `return false` to `return true` - It's not the issue here, but it's the type of confusion that could bite you / anyone else working on the code in the ass — Shiny, Nov 23 '19 at 19:31
Also, if you're not sure if it's working / run - You should upload both the code that you think should be calling the function, and the test data you're using — Shiny, Nov 23 '19 at 19:32
`onclick"validateEmail()"` should be `onclick = "validateEmail()"` - Note the missing equal sign — Shiny, Nov 23 '19 at 19:39
Does this answer your question? [How to validate an email address using a regular expression?](https://stackoverflow.com/questions/201323/how-to-validate-an-email-address-using-a-regular-expression) — phuzi, Jun 10 '21 at 15:55

Shiny · Accepted Answer · 2019-11-23T19:51:31.507

function validateEmail() {
  // There are, I feel, better version of this regex online
  // You can check "https://emailregex.com/"
  var reg = /^([A-Za-z0-9_\-\.]){1,}\@([A-Za-z0-9_\-\.]){1,}\.([A-Za-z]{2,4})$/;

  // document.getElementById() - Easier to read & understand, and more widely used
  var address = document.getElementById('Email').value;

  // Corrected your returns - not the main issue in the function, but the old
  // returns might have caused confusion
  if (reg.test(address) == false) {
    alert("Email not valid");
    return false
  }
  return true
}

<form id="personalInfo">
  <h2>Email: </h2>
  <input type="text" name="Email" id="Email">
</form>

<!-- You had a typo on the onclick but has since been fixed -->
<input type="button" onclick="validateEmail()" value="Submit">

score 1 · Answer 2 · answered Nov 23 '19 at 19:46

Two issues here:

1- In your HTML, you are missing an = sign here: onclick"validateEmail()" (Edit: seems you fixed it now)

2- in your Javascript, the indices personalInfo and Email are strings, wrap them in quotation marks:

var address = document.forms['personalInfo'].elements['Email'].value;

function validateEmail() 
{
var reg = /^([A-Za-z0-9_\-\.]){1,}\@([A-Za-z0-9_\-\.]){1,}\.([A-Za-z]{2,4})$/;
var address = document.forms['personalInfo'].elements['Email'].value;

if (reg.test(address)== false)
{
    alert ("Email not valid");
    return false
}   
return true;
}

<form id="personalInfo"> 
<h2>Email: </h2> <input type="text" name="Email" id="Email">  <br>
</form> 

<input type="button" onclick="validateEmail()">

score 1 · Answer 3 · edited Jun 10 '21 at 15:50

1

When dealing with email inputs, set the input type to email instead of text - like so:

<input name="my-email" type="email" />"

Then the browser will perform validation on the input; such as if the input doesn't have the @ present.

edited Jun 10 '21 at 15:50

JustCarty

3,839
5
31
51

answered Jun 10 '21 at 10:08

Jimmy

101
2
5

JS Student Email Validation

3 Answers3