Validating Email Addresses

Checking email addresses

It is often required that two fields in a form are compared, for example to ensure an email address has been entered accurately.

The form below shows two fields, and uses JavaScript fired by the onchange event to ensure the contents of the fields are identical.

This example also checks that the email address is in a valid format, but - a big but - the validity check may exclude some valid addresses where accented characters are used.

The forms onsubmit event should be used to validate the contents of these fields, as well as any other fields in the form. Do NOT use the onclick event on the submit button - it is possible to submit a form by pressing the Enter key without touching the submit button.

This form does not actually submit to anywhere, but messages will appear showing the status of the form fields. A working example is located here .

Retype Email

The javascript used is:

<script type="text/javascript">

function isEmail(string) {
  var regex1 = /^[\w\.\-]*[\w\.\-]+\@([a-z0-9]+[\.\-])*[a-z0-9]+\.[a-z]{2,}$/i
  var regex2 = /^[\w\.\-]*[\w\.\-]+\@\[\d{1,3}\.\d{1,3}\.\d{1.3}\.\d{1,3}\]$/i

  if (regex1.test(string)) { return true; }
  else { 
    if (regex2.test(string)) { return true; }
    else { 
      alert("Email address is not valid")
      return false; 
    }
  }
}

function chkvals(nm) {
  var df = document.forms[nm]
  if (!compFields(nm)) { return false; }
  if (df.email1.value == "") {
    alert("Must have an email address in 'Email' field");
    df.email1.focus();
    return false;
  }
  if (df.email2.value == "") {
    alert("Must have an email address in 'Retype Email' field");
    df.email2.focus();
    return false;
  }
  if (!isEmail(df.email1.value)) {
    df.email1.focus();
    return false;
  }
  return true
}

function compFields(nm) {
  var df = document.forms[nm]
  var aa,bb;
  aa = df.email1.value;
  bb = df.email2.value;
  if ((aa=="") || (bb=="")) { return true; }
  if (aa!=bb) {
    alert("Email and check fields should match");
    df.email1.focus();
    return false;
  }
  return true;
}

</script>

The form HTML (on this page, and without styles or formatting) is:

<p><label for="email1">Email</label><input name="email1" id="email1" onchange="compFields(0)" type="text" /></p>
<p><label for="email2">Check Email</label><input name="email2" id="email2" onchange="compFields(0)" type="text" /></p>
<p><input name="Button1" type="button" value="Submit" onclick="if (chkvals(0)) document.getElementById('resp').innerHTML = '<p class=&quot;green&quot;><strong>Email Checks OK</strong></p>'" /></p>

If you use this script and form, there are some changes that must be made to make it work in your website:

The form MUST have <form... and </form> tags before and after the form fields. On this (aspx) page these tags are at the beginning and end of the page.
The Submit button used here is just a button (type="button") - on a "real" form this should be a submit button (type="submit"). The working example has the correct form tags and submit button for .htm and .asp pages.
Copy and paste the JavaScript into your page in Code View, The JavaScript should be placed between the <head> and </head> tags.
Copy and paste the <form> code between the <body> and </body> tags, again in Code view. Using Code View eliminates the problems of < symbols being changed to < in the code, and similarly with other HTML escaped characters.
Add any further fields your form requires - Do not use any FrontPage field validation.
The JavaScript refers to the form fields using the document.forms[number] method. The number used is found by counting the number of forms before this in the page. In this page, the form is part of the only form on the page, so the number is 0. On the example page the form is the second form on the page, so the number is 1.
In Design View, right click anywhere in the form and choose Form Properties. Use the properties dialogue to set up the form handler, (send to email or save as a file if using FrontPage extensions, Send to other if using asp, php etc.) You can also set up a confirmation page using the dialogue Options.
Using FrontPage validation in the form should not cause any problems - provided the user uses the submit button to submit the form. If they press the Enter key the form will submit without validating the email address. If not using FrontPage validation then the method used in the example, where the onsubmit event is used to start the checks, is better.

Verify Email Address Fields in Forms

Related Pages

Validating Email Addresses