Learn Modern JavaScript

23. JavaScript and Forms

Validating forms using JavaScript is usually one of the first ways in which people want to start using JavaScript where they can't just take a prewritten script and plug it into their page. After all it is their form that the script needs to validate and while the individual fields in the form may be ones that are used in other people's forms, the overall form will not be.

The classical approach to accessing forms from JavaScript was to reference the forms collection and embed JavaScript event handlers into the form field tags themselves. Doing thisgets your form working but it clutters your HTML with JavaScript - the exact opposite of what we want to do in order to follow the modern approach of semantic HTML and unobtrusive JavaScript. To attach our JavaScript in an unobtrusive way we will need take a different approach.

The most obvious way of separating up the code appropriately is to start with the HTML and make sure that it contains what we need in order to access all the form fields from outside of the HTML. Form fields can have two different identifiers attached - the name and the id. Since we are separating up functionality let's separate up the use that we make of these. The name of the form fields is what is used to pass the informqation from the form to the server side processing. Those fields are what in PHP end up in the $_GET[] or $_POST[] array (depending on the method used for the form) and the corresponding arrays in other server side programming languages. Let's leave the name attribute for that process and give each form field a unique id to allow us to attach the JavaScript to the form without interfering with the server side processing. My article on referencing form fields goes into a lot more detail on how this can be done including how to give radio buttons unique ids while still allowing them to be processed as a group.

With the ids in place in our form, adding whatever event handlers we want to the form fields without changing the HTML ourselves becomes trivial. For example if we want to add an onblur event handler to a field with an id of 'email" to call all a validateEmail function, all we need to do is to specify:

This not only adds the event handler to the form field but it also sets it up to pass the form field into the function itself so that you can reference the value of the form field from within the function as this.value allowing the same function to be called for different form fields.

We can add event handlers to all of the fields within the form and even to the form itself exactly the same way. The only thing that we need to watch out for is that as with all the other event handlers that we add from JavaScript, we need to ensure that the appropriate elements within the page are already loaded before trying to reference them but of course we already looked at how to handle that in the earliest tutorials in this series. This does of course mean that the JavaScript may not run if your visitor starts filling out the form before your page finishes loading properly but since you need the form to be fully functional for those visitors who don't have JavaScriptenabled (and for whom the javaScript will therefore never run) you will have appropriate server side validation in place to catch any errors in the input regardless of whether the javaScript validation runs or not. After all the JavaScript validation is simply there in order to make things a little friendlier for your visitors by reporting some errors more quickly and should never be relied on for validating that what is entered is acceptable for your purpose.

More of This Tutorial

• 1 Introduction
• 2 Events
• 3 Visitor Triggered Events
• 4 Timed Events
• 5 Testing Conditions
• 6 Feature Sensing
• 7 Alternate Tag Location
• 8 Functions and Methods
• 9 Passing Parameters
• 10 Variables/Properties
• 11 Objects
• 12 Arrays
• 13 Nodelists
• 14 Loops
• 15 Numbers
• 16 Strings
• 17 Dates
• 18 Alert
• 19 Other Objects
• 20 Extending Objects
• 21 Creating Objects
• 22 Collision Proofing
• 24 Updating the Web Page
• 25 Obsolete JavaScript