Invalid Field Indicators
Without going into different methods of actually validating the data entered into a form, this article will just give some examples of different methods of letting the user know that something they entered isn’t quite right. I’ve tried to make the code below easy to use with whatever validation you have, where ever you see the validateElement function, that is where the call to your function would go.
I don’t show the code for the validateElement function since the purpose here is to show some different ways of notifying the user, not how to do the validation. Briefly though, my validator uses the type of field, the second argument to the function, to determine what type of validation needs to be performed on it, then returns an appropriate message if it is not valid.
My validateForm function simply calls each field to be validated in turn, for more complex or longer forms you can use the elements array and loop through them or whatever method works best for your situation.
The demo form HTML is:
<html>
<head>
<title>Validation Example</title>
</head>
<body>
<h4>A simple form</h4>
<p>
<form name="testForm" onsubmit="return validateForm(this);">
<table>
<tr>
<td>
Full name:
</td>
<td>
<input type="text" name="fullName" id="fullName" />
</td>
</tr><tr>
<td>
Phone number:
</td>
<td>
<input type="text" name="phone" id="phone" />
</td>
</tr><tr>
<td>
Email:
</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr><tr>
<td>
Location:
</td>
<td>
<select name="location" id="location">
<option>Select a location below</option>
<option value="N">North</option>
<option value="S">South</option>
<option value="E">East</option>
<option value="W">West</option>
<option value="U">Up</option>
<option value="D">Down</option>
</select>
</td>
</tr><tr>
<td>
Preference:
</td>
<td>
<input type="radio" name="preference" id="prefApples" value="apples" /> Apples
<br/>
<input type="radio" name="preference" id="prefOranges" value="oranges" /> Oranges
</td>
</tr><tr>
<td colspan="2" align="center">
<input type="button" value="Cancel" onclick="window.location='formValidator.aspx';" />
<input type="submit" value="Submit" />
</td>
</tr>
</form>
</p>
</body>
</html>
Alert
The simplest error notification is everyone’s favorite, the JavaScript alert. This is also the easiest to implement, just loop through each element on the form that needs to be checked, if the element is not correctly completed add a line to your error message. When you’re done checking the entire form, display the message to the user. Here is some code that does exactly that.
function validateForm(theForm){
var errMsg = "";
var temp = "";
isValid = true;
temp = validateElement(theForm.fullName, "text", "full name");
if (temp != ""){
errMsg += temp + "\n";
}
temp = validateElement(theForm.phone, "phone", "phone");
if (temp != ""){
errMsg += temp + "\n";
}
temp = validateElement(theForm.email, "email", "email");
if (temp != ""){
errMsg += temp + "\n";
}
temp = validateElement(theForm.location, "select", "location");
if (temp != ""){
errMsg += temp + "\n";
}
temp = validateElement(theForm.preference, "radio", "preference");
if (temp != ""){
errMsg += temp + "\n";
}
if (errMsg != ""){
alert(errMsg);
isValid = false;
}
return isValid;
}
This method works best for small, simple forms. For larger, more complex forms, aside from not helping the user find the field(s) in question, which can be pain in some forms, the additional drawback here is that the user has to click ok and remove the alert before they can start correcting the errors, if they had a lot of them then they may have to do this several times before catching them all.
On page message
The next step up from the alert would be to place the list of errors right onto the page, that way what they need to correct is right there all the time. This method requires some additional code on the page to create the div to hold the error message, a simple one would look like this:
<div id="errorMsg" style="display:none; position:relative; width:450px;"> <font face="Arial, Helvetica, sans-serif" color="red" size="-1"> <span id="errors"> </span></font></div>
I inserted this right at the top of the page under the h4 tag.
To make this work just change the new lines inserted into the error message into HTML breaks and, instead of putting the message into in an alert, write it to the error div. Another good idea, especially for larger forms, is to scroll the screen back up to where the error message is going to appear. This helps to address the problem that the user may not even notice the error message and get frustrated with the form for not submitting. This method also suffers from not showing the user where the fields in question are so that they can be fixed.
The code below shows the new validateForm function
function validateForm(theForm){
var errMsg = "";
var temp = "";
isValid = true;
temp = validateElement(theForm.fullName, "text", "full name");
if (temp != ""){
errMsg += temp + "<br/>";
}
temp = validateElement(theForm.phone, "phone", "phone");
if (temp != ""){
errMsg += temp + "<br/>>";
}
temp = validateElement(theForm.email, "email", "email");
if (temp != ""){
errMsg += temp + "<br/>";
}
temp = validateElement(theForm.location, "select", "location");
if (temp != ""){
errMsg += temp + "<br/>";
}
temp = validateElement(theForm.preference, "radio", "preference");
if (temp != ""){
errMsg += temp + "<br/>";
}
if (errMsg != ""){
writeInnerHtml(errMsg, "errors");
document.getElementById("errorMsg").style.display = "";
window.scrollTo(0,0);
isValid = false;
}
return isValid;
}
The writeInnerHtml function is helper function I wrote back when browsers were less standards consistent... errr right.... here it is, we'll probably need it for a while yet. Just stick it in an include file and it'll be there for all your pages.
var browserName = navigator.appName;
function writeInnerHtml(newHtml, spanName){
if (browserName == "Microsoft Internet Explorer"){
document.all[spanName].innerHTML = newHtml;
} else {
document.getElementById(spanName).innerHTML = newHtml;
}
}
The next page in this series will show a couple of more user-friendly methods for notifying the user of problems. The third page will get even fancier.
If you have a question, comment, bug fix, or addition let us know. We'll add it
to the demo with the proper credit. Just drop us an
email at comments@directedinsight.com