E-mail format validation with JavaScript

Having a contact form in a website, I wanted to prevented in an easy way, and as much as possible, the user to enter an invalid e-mail address. I first thought using regular expression within the PHP script but then would be better to display the error message on the form without reloading the page so I’ve choosen JavaScript.

function checkForm(form) {
  var emailFormat = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
  if (form.email.value == "") {
       document.getElementById('check').innerHTML = "Please fill in your e-mail.";
       form.email.focus();
       return false ;
  } else if (form.email.value.search(emailFormat) == -1) {
       document.getElementById('check').innerHTML = "Please fill in a valid e-mail.";
       form.email.focus();
       return false ;
  }
return true;
}

The regular expression used will accept a normal e-mail format like foo@bar.com as well as something like foo_bar23@foo-bar19.com

That piece of code is part of a bigger JavaScript function where other statements check the other fields of the form in case they have null values. If the return boolean is false then the form is not submitted and the appropriate error message is displayed.

2 thoughts on “E-mail format validation with JavaScript

  1. panoskrt

    Well, that’s true. However, I wouldn’t trust a person that gives me an e-mail address like “abc+mailbox/department=shipping@example.com”, or “!#$%&’*+-/=?^_`.{|}~@example.com”or “”abc@def”@example.com”. If I see something like this I’ll either guess is spam or a system type of account that does not belong to an actual user. Of course, accepting e-mail addresses like these can be more than useful, but depends on the intention of the form that they will be typed in and the system that will accept them.

    The JavaScript security issue you mentioned is much more important. As I said in the post I’ve chosen to use JS so I’ll not have to re-load the page. To be honest, I didn’t think what if JS is disabled. So after your good point I implemented another check in the PHP script (with the same regular expression):

    $emailFormat = ‘/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i’;
    $email = strip_tags($_POST[’email’]) ;

    if (preg_match($emailFormat, $email)){
    // do stuff and send e-mail
    } else {
    echo “Invalid address – Process stopped”;
    }

    PS: Thanks for the positive comments🙂

  2. I believe that your regex will reject as invalid a lot of valid addresses.
    Take a look here http://en.wikipedia.org/wiki/E-mail_address for examples of valid (but admittedly somewhat obscure and infrequently used ) addresses.

    A regex pattern that i’ve found to be pretty decent is the one the Django framework uses for validating EmaiFields and you can see it here:
    http://code.djangoproject.com/browser/django/trunk/django/forms/fields.py#L421
    (Its rather hairy and ugly, but it works)

    Also, if you don’t have server side validation, then anyone who disables javascript will be able to submit garbage to your site. Sometimes with security implications.

    PS. I *really* enjoy your blog. Keep the posts coming :p

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s