How to do email address validation using Javascript (without JQuery)?

Question

I'm trying to do an email address validation for an input text field, however, it must only submit if the entry is not null and has the @ char in it

Example 1 is the one that works, however, it excludes the need for the @ char

function emailvalidation() {
var x=document.forms["input"]["email"].value;

if (x==null || x=="") {
    alert("Input email address, please!");
return false
}

Example 2 which does not work, but is how I imagine it would be written

    function emailvalidation() {
var x=document.forms["input"]["email"].value;
var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

if (x<>null || x<>"" && x.value.match(email)) {
    alert("Input email address, please!");
return true
} else {
    alert("Input email address, please!");
return false
}
}

Anyone have any ideas? Thank you though, preferably without JQuery! Thanks!

What is the does "not work" means? Do you get false positives? — Cristik, Apr 15 '15 at 21:15
you can validate a valid email use regex. you can reference this [post][1] [1]: http://stackoverflow.com/questions/46155/validate-email-address-in-javascript — Ari Djemana, Apr 15 '15 at 21:21
If you only want the `@` sign why not use `x.indexOf('@') != -1`? Your second function should probably have `x.match(email)` instead of `x.value.match(email)` since `x` already IS the `value`. — putvande, Apr 15 '15 at 21:23
When you say it doesn't work, do you have examples that fail the second example? Have you tried replacing `<>` with `!==`? Works in this [fiddle](http://jsfiddle.net/xe0a57n6/2/). You'll want to change the || to an && too. I had to remove the `.value` from `x.value.match()` as I'm using a string in place of the element. — adamdc78, Apr 15 '15 at 21:35

score 1 · Answer 1 · answered Apr 15 '15 at 22:03

Another email validation.

function isValidEmailAddress(emailAddress) {
            var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
            return pattern.test(emailAddress);
        };

score 0 · Answer 2 · edited May 23 '17 at 12:32

You have a couple of logical problems in your solution.
Firstly, the condition is that x is not null and x is not an empty string and x matches the pattern.
Secondly, <> is the wrong comparator for javascript; use != or !==.
Thirdly, as pointed out by putvande x is already the element's value, so x.value.match() is probably causing you issues.

function emailvalidation() {
  var x = document.forms["input"]["email"].value;
  var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  if (x !== null && x !== "" && x.match(email)) {
    return true;
  } else {
    alert("Input email address, please!");
    return false;
  }
}

I just wrote my own comment as I got this one, thank you very much for it though, you've taught me a great deal! :) — WorkingScript, Apr 15 '15 at 21:44

score 0 · Answer 3 · answered Apr 15 '15 at 21:42

Thank you all for this! The solution was a mixture of all of the answers! Though, here is the final solution! Needed a new reg expression and !==

Thank you all though, from a JS beginner, it is really appreciated

function emailvalidation() {

var x=document.forms["input"]["email"].value;
var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

if (x !== null && x !== "" && x.match(email)) {
return true
} else {
    alert("Input email address, please!");
return false
}
}

score 0 · Answer 4 · edited Apr 12 '17 at 07:31

Based on your first script and requirements, one solution without regex, and one with.

Note that a text-inputfield only returns strings. Email-addresses must have something before the @, so we check if an @ appears after the first character (using indexOf we don't require a regex). Also, if we have found the @ that means the string was not empty!!
If the @ is at the same position as the last @ and this position is smaller then the total string-length, this gives us a true or false value, which we can instantly return.
If none of the three conditions is met, then we alert our error-message. alert returns undefined (which in itself coerces to false in javascript, but) which we force to a boolean false using double not !! and return that value.

The second example follows the same logic, but uses a regex.

function emailvalidation(){ //without regex
  var s=document.forms.input.email.value
  ,   x=s.indexOf('@');
  return( x>0 && x===(x=s.lastIndexOf('@')) && x<s.length-1
        ) || !!alert("Input email address, please!");
}

function emailvalidation(){ //with regex
  return /^[^@]+@[^@]+$/.test(document.forms.input.email.value) || !!alert("Input email address, please!");
}

<form name="input">
  <input name="email" type="text" />
</form>
<button onclick="alert(emailvalidation())">test</button>

Final note, it's good that you are liberal in accepting email-addresses, since trying to do a good job in regex is long and difficult, see for example this regex: http://www.ex-parrot.com/pdw/Mail-RFC822-Address.html
There is simply no 100% reliable way of confirming a valid email address other than sending an email to user and and waiting for a response. See also https://softwareengineering.stackexchange.com/questions/78353/how-far-should-one-take-e-mail-address-validation
If you do try to regex 'valid email-addresses' then inform your employer that you are going to cost him business/clients/cash!!!

How to do email address validation using Javascript (without JQuery)?

4 Answers4