It is often required that two fields in a form are compared, for example to ensure an email address has been entered accurately.
These examples also check that the email address is in a valid format (not
that the address is genuine), 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 submits to itself, so after submitting check the querystring in the URL to see the values for email and check email fields (email1 and email2 respectively). The querystring is repeated here (with each parameter on its own line) for convenience:
The form HTML is:
<form id="contact" action="email-check.htm" method="get" name="contact" onsubmit="return chkvals(2)">
<p><label for="email1" style="width:150px;text-align:right;float:left;padding:.4em 1em 0 0;">Email</label><input class="inp" name="email1" id="email1" onchange="compFields(2)" type="text" /></p>
<p><label for="email2" style="width:150px;text-align:right;float:left;padding:.4em 1em 0 0;">Retype Email</label><input class="inp" name="email2" id="email2" onchange="compFields(2)" type="text" /></p>
<p style="padding-left:160px;"><input class="button" name="Button1" type="submit" value="Submit" /></p>
If you use this script and form, there are some changes that must be made to make it work in your website:
- 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. (see below)
1st form is 0, 2nd form is 1, 3rd form is 2, etc.
These numbers are used in the event calls, for example:
onsubmit="return(chkvals(1)" or onchange="compFields(1)"
The form above is the second on the page (the first being the search in the left column), the form below is the third form in the page.
- 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.
- Do not use FrontPage field validation. This may prevent the email check scripts from working since FrontPage will change the form name and the onsubmit attribute in the form.
An alternative version that is compatible with the FrontPage validation is below - but note that the user may have to press the Submit button to ensure the email address is validated.
The code for the form fields is similar to that above, but the submit button gains an onclick event code, and the <form> tag loses the onsubmit event code.
<form id="contact2" action="email-check2.htm" method="get" name="contact2">
<p><label for="email3">Email</label><input name="email1" id="email3" onchange="compFields(2)" type="text" /></p>
<p><label for="email4">Retype Email</label><input name="email2" id="email4" onchange="compFields(2)" type="text" /></p>
<p><input name="Button2" type="submit" value="Submit" onclick="return chkvals(3)"/></p>
Again, the resulting querystring is reproduced here: