[Javascript] Simple Javascript Validation

(Reposted from my MSCorlib blog)

I just had to fix this code to make it work in FireFox, so I thought I'd put it up here on MSCorlib also. I'm pretty sure I wrote this, but maybe I'm mental and found it somewhere on Google. It's been a few years since I touched it. At any rate, this is a quick article to show it works. Since most of you are probably on to ASP.Net, you won't need this. But it's still handy if you have to maintain some older classic ASP stuff, or some straight HTML/Javascript.

Basically, I had a big long function that went through each element on the form that I wanted to make required. So something like email, phone, name, etc. Each of these were hard coded in to the Javascript code. I decided I hated that since it was a pain in the ass to work with every time I had to modify it. To get around this, I created a single function that would go through each element and see if it was required. If it was, return an error message to the user to let them know what to fix.

The hard part about this was making a message that was easy to understand. There are two ways to do this. 1) use an attribute to store the "user-friendly" field name. or 2) Parse the name property of the element. Since I name all my elements in a similar fashion, I went with #2 (to be honest, option #1 didn't occur to me until about 5 minutes ago).

So the code. First, you need an input button on your form:

<input type="button" name="btnSubmit" value="Submit" onclick="SubmitPage();" />

This button is wired up to the SubmitPage function. That function will do the error check and then either submit the page or show the error:

function SubmitPage()
{
var sError, rExp
rExp = /_/g; // Regular expression to replace underscores globally

sError = ErrorCheck();
if(sError.length > 0) {
alert(sError.replace(rExp," "));
return false;
} else {
document.forms[0].submit();
}
}

To make this print out the correct name of the field, I replace underscores with a space. The first three letters are also trimmed off since I use those three letters as the type of field. For example, txtEmail, txtFirst_Name, etc. If you wanted to get rid of this code, you could modify it to use a 2nd parameter for the user to see instead of this hacked up way.

The function calls another function to get the error, if it exists:

function ErrorCheck()
{
var i, sField, sError, sFieldName;
sError = "";
for (i=0; i <> 0) {
sFieldName = document.forms[0].elements[i].name.substr(3)
sError = sError + sFieldName + " is required.\n";
}
}
}
return sError;
}

This function loops over every element in form[0] to see if it is required. If it is, the field name is appended to error message, and then the whole thing is returned to the calling function. If the calling function sees a length > 0, it does an alert and shows the user the problem. The final part of the code is just putting the required attribute on the input box:

<input type="text" name="txtName" required="true" />

And that's it. Any field with 'required=true' will be checked and spit out in the event of an error. It's quick, it's dirty. Make sure you do server-side checking as well since client-side only checking is easy to get around.