Javascript Form Validation
Since I have been absolutely immersed in developing our new website, I thought I would put a post about JavaScript form validation. There are quite a few forms on that will be on our new site, and I have been putting a lot of work into making sure that there are as few server calls for those forms as possible. One way to do that is to ensure that forms are valid before submitting them to the server, which means checking the information that a user has put into the form before submitting it.
There are two ways to validate, one on the server side and one on the client side. The server side option is to submit the form as it is, and then let the server script (such as a PHP or ASP script) check the data. If something is not the way it should be, it will then return an error. Usually the same form would be displayed, with the information still filled in, that includes an error message telling the user what to do. The method requires that the form info be posted to the server, processed, and then a response received by the user. All of that just to let the user know that they forgot to enter their name.
A better way, in my opinion, to validate a form is to let the client’s browser do the processing via JavaScript. This method requires that when the form is submitted, a JavaScript function is called prior to sending the information to the server. That function will check the text fields, look for errors, and reply almost instantaneously since it doesn’t require a call to the server. If the information clears the JavaScript test, the form is submitted and the server is involved. This method accomplishes the same goal, however it can really add to the user experience since the validation process happens in an instant.
In order to do this, you will need to add either an “onsubmit” attribute to the form tag, or add a “submit” event to the form from an external file (which I recommend). The validation JavaScript function should return either true or false to denote whether or not the form should be submitted. Your onsubmit event should then return that value, which will tell the browser whether or not to submit. For example, say we have a form called loginForm that we want to validate with the function validateForm. That function will return true if everything is fine, and false if the form info is not valid. We would then attach the function by using something like this for the form tag:
form name=”loginForm” id=”loginForm” method=”post” action=”/login.php” onsubmit=”return validateForm();”
This becomes pretty easy once you have written a few, so if you are looking for help with form validation please post in our Community Forums, and I’ll see what I can do to help people out.
