How would I use javascript to validate an e-mail with output on the DOM?

Question

Basically I created a form in html and when things are input properly it simply goes to google.com. Right now I have completed the first few fields but I am unsure of how I would make it recognize if the input that was put in and did not include an @ sign or a . some point after it.

I created a fiddle as I was having trouble getting some of the longer of my lines of code to be in-line.

Click here for the fiddle Example

another thing i noticed is that isNaN should not be a part of email i made that mistake — Mark Gregg, Apr 14 '15 at 10:53
maybe you could try using validation jquery class. there are a lot of validation.js available which might suit your need. — Sp0T, Apr 14 '15 at 10:59

score 1 · Answer 1 · answered Apr 14 '15 at 10:45

1

You can use HTML5 properties like :

pattern attribute which contains a regexp
set your input type to email

If you want to do it with JavaScript, use a regexp also and use the test() method to verify it.

answered Apr 14 '15 at 10:45

Dr. Z

236
3
19

1

HTML5 is not supported in all browser's version. I could rant about IE6/7/8 and IE9/10 not being released on Windows XP. – Deep Kakkar Apr 14 '15 at 10:50
The old fashion way ... :-) Try to use regexp in JavaScript, but i suggest you to validate your field on the server side too. – Dr. Z Apr 14 '15 at 10:51

score 1 · Answer 2 · answered Apr 14 '15 at 10:48

1

Add this

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

answered Apr 14 '15 at 10:48

Shayan Ghosh

882
6
14

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

You have a few options depending on how thorougly you want to validate.

email.indexOf('@') >= 0

checks that there is an @ at all in the email. See http://jsfiddle.net/27f1h6ws/ for a version of your fiddle with it added.

A more thorough way would be to check it with regex. You can do it extremely simple just checking the general structure of the email input, or extremely thorough check for all valid characters, depending on how crucial the validation is. See this link or the answers in this question for more information.

edited May 23 '17 at 12:06

Community

1
1

answered Apr 14 '15 at 10:51

Robin

1,251
11
18

i am trying this now 1 problem I just realized I had was i had isNaN attached to email and it caused it to always think I was inputting something wrong. – Mark Gregg Apr 14 '15 at 11:02

How would I use javascript to validate an e-mail with output on the DOM?

3 Answers3