Form Validation - No Alert ~ Tested in IE6.0, Netscape8.1, Opera9.0, Firefox1.5.0.5 and AOL Explorer1.2

Stop displaying those annoying alert boxes with your JavaScript form validation. This script uses images to display any error messages to the user, cool!

We have tested the code in IE6.0, Firefox1.5.0.5, Opera9.0, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and java scripts, this is an easy, three (3) part copy and paste code with minimal reconfigurations.

Download a zip file, unzip and upload the five 5 images into your directory.

Copy/Cut & Paste the coding into the <HEAD> section of your HTML document.
The only reconfigurations would be that of changing the path of the images you have uploaded into whatever directory you have decided to use.

Incorporate the <BODY> section of code into a functioning form.

There are fourteen (14) places within the below <HEAD> section of code that may possibly need to be reconfigured. They would be the path of the images you have uploaded into a directory other than your main or root directory. In other words, if you have uploaded the images into your root directory, you do not need to make any reconfigurations. The path is already [ Relatively Defined ] to call the images from your root or main directory.

<!-- Begin
// Preload images
var empty = new Image(); empty.src = "fieldempty.gif";
var email = new Image(); email.src = "emailerror.gif";
var zipcd = new Image(); zipcd.src = "ziperror.gif";
var phone = new Image(); phone.src = "phoneerror.gif";

var haveerrors = 0;
function showImage(imagename, imageurl, errors) {
document[imagename].src = imageurl;
if (!haveerrors && errors) haveerrors = errors;
}

function validateForm(f) {
haveerrors = 0;
(f.fname.value.length < 1) // validate first name length
? showImage("firstnameerror", "fieldempty.gif", true) // no semi-colon after this line!
: showImage("firstnameerror", "blankimage.gif", false); // true = errors, false = no errors

(f.lname.value.length < 1) // validate last name length
? showImage("lastnameerror", "fieldempty.gif", true)
: showImage("lastnameerror", "blankimage.gif", false);

(f.zip.value.length != 5) // validate zip code length
? showImage("ziperror", "ziperror.gif", true)
: showImage("ziperror", "blankimage.gif", false);

phonenumlength = f.area.value.length +
f.exchange.value.length + f.number.value.length;

(phonenumlength != 10) // validate phone number length
? showImage("phoneerror", "phoneerror.gif", true)
: showImage("phoneerror", "blankimage.gif", false);

(f.email.value.search("@") == -1 || f.email.value.search("[.*]") == -1) // validate email
? showImage("emailerror", "emailerror.gif", true)
: showImage("emailerror", "blankimage.gif", false);

return (!haveerrors);

Just say for arguments sake you have uploaded the images into a directory we shall call /images. The reconfiguration in all fourteen (14) places would look something like the below:

? showImage("emailerror", "images/emailerror.gif", true)
: showImage("emailerror", "images/blankimage.gif", false);

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]