Javascript form validation with regular expression

Validating form data is a simple way to bolster the security of your sites and to improve the user experience. Validation should ultimately be done at the server end, but you can do some simple form analysis in javascript too. Here I'll just give a simple example to show how it's done.

Here is some code for a small form:

<form name="form1" onsubmit="return checkform()" action="login.php" method="POST">
   <input type="text" name="name">
   <input type="texxt" name="telno">
</form>

Notice that the form tag carries an extra 'onsubmit' attribute. Onsubmit is used to tell the browser that when the form is submitted, you want it to run something else first. In this case it's calling the checkform() function. The onsubmit method tests the value which is returned from checkform(). If the value is true the form will be submitted. If, however it is false, the submit process will stop.

This is what the javascript function will look like:

function checkform(){
        //clean out acceptable non-numeric characters
        var clean = document.form1.telno.value.replace(/[()+.- ]/g, '');
        if (isNaN(parseInt(clean))) {
                error = "The telephone number contains illegal characters. ";
                alert(error);
                return false;
        }
        if(clean.length<11){
                error = "The telephone number is too short";
                alert(error);
                return false;
        }
        return true;
}

This function directly accesses the value of the telephone number field in the 'form1' form by walking down the DOM heirarchy with document.form1.telno.value. The method 'replace' is then called. In this case a regular expression is used to identify any non-alphanumeric characters and strip them out. It simply replaces them with the string '' (ie nothing). The first if() test then looks to see if the remaining string is a number. If it isn't, that implies that there are some letters and other garbage in the string, so we just push a message up to the user and return a 'false' value. the second 'if' test simply looks at the length of the number. If the number is under 11 characters in length and alert box is pushed up to the user and the function returns with false. Otherwise, the function returns 'true'.

This function can be placed in a library outside the actual web page - that way it can be used in any number of webpages, without having to be recoded. To achieve this, just paste the function into a file and save that file as functions.js. You then just need to make it available in your web page with the following line:

<script language="JavaScript" src="functions.js"></script>

That's it! You can get really sophisticated with form validation, but it's important not to end up annoying the user, Don't forget also that client-side documents can be altered by the user, so javascript validation should not be used for any security checking (eg for preventing SQL injection attacks). This is just to simplify the user experience. Essential validation should also be carried out at the server side of your http communications.

bye for now.

christo