Document Object Model - Forms
Form fields have a number of attributes not found on other elements within the web page. Also since validating forms is one of the more common reasons for adding JavaScript to a page it is worth looking at more specific examples of how to use the DOM commands to perform the interactions necessary to perform the validation.
- Access Form Fields - As our form fields will need an id in order to attach their label we can use this to reference the field from JavaScript and leave the name for the server side processing.
- Access Form Tag - We can easily reference the form element form any field within the form so it doesn't need a name or id for us to access it from JavaScript.
- Radio Buttons - The one situation where we do need to make use of the name attribute.
- Change Values - How to change the value in an input field from within JavaScript.
- defaultValue and defaultChecked - JavaScript keeps track of the original values of fields so we can easily change it back if needed.
- Update Textareas - How to change the value in a textarea from within JavaScript.
- Create Input - Creating an input field using the DOM is made slightly more complicated because Internet Explorer doesn't allow a name to be added after it is created.
- Create Label - How to simplify creating form fields from JavaScript by incorporating the code to create the input field and its associated label into a function.
- Change Type - Internet Explorer doesn't allow us to change the type of an existing input field. Here's how to get around that restriction.
- Add Select Option - We can use the Option object that JavaScript associates with each option element to add new options to a select with a single statement instead of the several statements required by the regular DOM calls.
- Get Select Option - How to work out which option in a select list is selected.
- Combo Box - While waiting for browsers to support this new HTML 5 form field we can create our own using an input field, a list and some JavaScript.
- Form Validation Using Require and Pattern - A more in depth example that shows you how to make use of a couple of new HTML 5 attributes to standardise your form field validation even in browsers that do not yet support HTML 5.
- Get Label - A small amount of extra code will allow you to use the label text in your error messages instead of the field ids.
- Form Validation Without HTML 5 - We can add a small piece of extra JavaScript in place of the HTML 5 attributes if we prefer to stick with the current HTML standard.
- Submit Form - Calling the validations for the individual fields again before submitting the form (just in case a field never got the focus) is relatively simple.
This site is © copyright Stephen Chapman - Felgall Pty Ltd 2011-2012.
You are welcome to use any the example JavaScript from this site in the scripts for your site or any that you develop for others but may not use the longer example scripts that contain a copyright notice in any other way without permission.