Developments in what you can do with JavaScript means that we can now write our JavaScript validation in a way that is completely unobtrusive and which does not require any addition to a semantically coded form and only requires that a script tag is added immediately before the </body> tag in order to attach the JavaScript to the web page.
To see just how we can attach our validation scripts in a completely unobtrusive fashion let's look at a simple form that has just the one input field and a submit button. We'll assume that only the minimum tags required to define such a form are present and that the appearance of the form is handled by some CSS that we don't need to worry about at all in attaching our validation to the form. It isn't going to matter what other HTML appears in our form either since our script is not going to reference any of that code.
<form action="#" method="post">
<fieldset>
<legend>My Form</legend>
<label for="myField">My Field</label>
<input type="text" id="myField" name="myField">
<input type="submit" value="Submit">
</fieldset>
</form>
The only part of this HTML that our JavaScript is going to use is the id attribute that is highlighted. That id needs to be there anyway in order to associate the label with the input field in a semantic manner however if your form is not written semantically it is a simple matter to add an id to the input fields in order to provide us with a way to reference them from our JavaScript validation without our needing to use the name (which is there for use by the server side script that will receive the form once it is submitted. We don't need an id or name on the submit button because we don't need its value to be passed as a part of the form (since it will always be the same value) and we don't need anything specifically on the form tag itself as having one or more ids within the form makes it easy to access the form tag.
The best way to detect when events in our web page occur is to use event listeners. These are a better choice than event handlers because they do not overwrite one another meaning that you will not need to modify your script if you decide to add some other functionality that is to run when the same event occurs. Unfortunately Internet Explorer 8 and earlier do not support event listeners. Those browsers do have their own proprietary equivalent called attachEvent and so we can use a little feature sensing to set up our own addEvent function that will use event listeners when that is supported and where it isn't will use attachEvent where that is supported. There shouldn't be anyone who is still using really old browsers that don't support either but for anyone who is we can simply treat them as we do those with JavaScript disabled and not perform any validation in the browser. The server side validation needs to be there anyway and will handle both where the JavaScript validation can't run and where the amount of time to perform particular validations in JavaScript means that it isn't worth doing. Here's one version of the code we can use to create our addEvent function.
if (window.addEventListener)
addEvent = function(ob, type, fn ) {
ob.addEventListener(type, fn, false );
};
else if (document.attachEvent)
addEvent = function(ob, type, fn ) {
var eProp = type + fn;
ob['e'+eProp] = fn;
ob[eProp] = function(){ob['e'+eProp]( window.event );};
ob.attachEvent( 'on'+type, ob[eProp]);
};
With that code in place and having an id on our form field, we can easily attach the function containing the validation for that field to the field itself with one simple function call that simply specifies the form field we want to process, the event that will trigger it, and the function to run when that event occurs. For most input fields the event we will use will be blur as that's the one that indicates that the field no longer has the focus (and hence that the person filling out the form has moved to a different field). Some form fields will require checking a different event though such as using the change event with select lists. Assuming that the function to validate our input field in the above form is called validateMyField we would simply include the following function call to attach that function to the blur event for our field.
addEvent(document.getElementById('myfield'),
'blur',
validateMyField);
Attaching event processing to the form tag itself is just as easy even though we don't have an id on the form tag. We can use the id field on any input field within the form to provide us with access to the form tag just by adding .form to the end of the DOM call. So to attach the function that will rerun the entire form validation when the form is submitted we would use a simple function call such as:
addEvent(document.getElementById('myField').form,
'submit',
validateForm);
While this involves slightly more JavaScript code than simply adding onblur="validateMyField" or onsubmit="validateForm()" into the HTML, it is not really any harder to write (since all of the extra code you need can be copied directly from this page) and it will make both the HTML and JavaScript easier to maintain.