Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

Forms

2008010302 Email to Ronx
 

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 page with two working examples is located here.



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 and 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" /></p> 

The onclick event on the button is not required - here it displays the status of the checks.

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 examples have the correct form tags and submit buttons 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 &lt; 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 forms are the third and fourth forms on the page, so the numbers used are 2 and 3.
  • 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.). If using the FrontPage extensions you can also set up a confirmation page using the dialogue Options.
  • Using FrontPage validation in the form may cause problems - this is explained in the example page.