3 Rules for Validating Forms

Despite its simplicity, proper form validation has become a lost art. The biggest pitfall web developers fall into when doing form validation is attempting to recreate functionality that already exists in the browser. This article will show how to properly validate a web form submission with JavaScript.

Rule #1: Always validate a <FORM> using an onsubmit() listener.

Question: What are all the ways a user can submit a form?

1. Clicking on a form's "submit" button.
2. Pressing "enter" while the cursor is in a text field on the form.
3. Shifting focus to the form's submit button and pressing the space bar.

The above list is incomplete.  Consider the multitude of web browsers and browser variants, such as mobile browsers. There are many ways a form can be submitted that we haven't even thought of.  If only web browsers provided some way of notifying developers that a form was submitted we wouldn't have to attempt to capture every conceivable action that the user could use to submit the form. Alas, there is a notification, the form's onsubmit() listener.

However, simply using an onsubmit() listener is not enough, there is something else that developers must do to ensure onsubmit() is properly called.

Rule #2: Always use the <INPUT type="submit"> button to represent the submit button

Too many times I've seen developers emulate the submit button using a <A>, <SPAN>, or <DIV> element. The emulated button has an onclick() listener that handles form validation and ends with form.submit(). The biggest problem with this approach is that it only works when the user clicks on the button! As described earlier, there are many ways to submit a form. The developer is now stuck trying to add an event listener for every conceivable way a user could submit the form in order to ensure the validation code is called. For example, because the validation function is only called when the link is clicked on, form validation doesn't occur when the user presses the enter key on a text field yet the form will still be submitted. When the developer realizes the problem they will add more JavaScript to the form that calls the validation function whenever the user presses the Enter key which ends up compounding the problem. In other words, the developer is recreating functionality that the browser already has. The problem could have been avoided if only the developer would have simply used a proper submit button and validated the form with an onsubmit() listener.

Rule #3: Don't use submit().

There is only one good reason to ever call a form's submit() method and unless you know what it is then you have no need to call it. The main problem with calling a form's submit() method is that it bypasses the onsubmit() listener.  If you aren't suppose to call submit() then how does a web developer control when a form gets submitted?  It's as simple as returning a Boolean value of true from you the onsubmit() listener (i.e. the validation function).  Conversely, preventing the submission of a form is as simple as returning a value of false from the onsubmit() listener.

The following example shows how easy it is to follow these rules and to validate a form when it is submitted:

    Name:
    Phone:
    

Sed vehicula vestibulum ante et rhoncus. Morbi eu erat vitae justo iaculis ullamcorper non eu tellus. In at lacus in velit aliquet sollicitudin vitae eu lacus.