[thelist] Simple Javascript field checking

Chris Heilmann lists at onlinetools.org
Thu Feb 24 10:30:11 CST 2005


> Sorry for going OT.
>
> As a user I find these duplicate email fields very annoying - copy and
> paste springs to mind.
>
> I can see the very VALID reason for having a confirm password input -
> but for email?
>
>
> Also you should be using a label tag for form elements to help
> usability and accessibility.
>
> <label for="email">Email</label><input id="email" name="email"
> type="text">

Same applies to automatic responses onblur of the field. It can be really
annoying to fill a form that tells me on every field when something is
amiss. Granted, it saves a reload but Javascript alerts are just cheap.

Your problem can be solved by focusing the error field after the alert,
which makes a lot more sense, as this is the problem field and it needs to
be entered correctly before you can proceed.

<table>
<tr>
  <td><label for="regEmail">Email:</label></td>
  <td><input type="text" id="regEmail" name="regEmail"></td>
</tr>
<tr>
  <td><label for="regEmail2">Email (repeat):</label></td>
  <td><input type="text" id="regEmail2" name="regEmail2"
onblur="checkEmail(this,'regEmail');"></td>
</tr>
</table>

 function checkEmail(thismail,othermail)
 {
	// get email field
	var f1=document.getElementById(othermail);
	// stop if it doesn't exist
	if(!f1){return;}
	// compare values
	if(f1.value!=thismail.value)
	{
       	// send error if there is a problem, and focus the field again
	    alert ("Your emails are not matching, please check this problem.");
		thismail.focus();
 	}
 }


-- 
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/



More information about the thelist mailing list