Form Events And Validation

jQuery provides a number of functions that make it simpler to hook into form events.

The most important is .submit() which can be used to trigger a submit event on a form element or assign an event handler to be called before the form processes the data. For example, if you want to have a button or some other UI element trigger the form submit, you can do something like:

<button id="mySubmit" onclick="doSubmit()">
 Submit
</button>

and in the button's click event handler you simply call submit on the form element:

function doSubmit(){ 
 $("#form1").submit();
}

A common mistake is to call submit on the button element. A submit event has to be directed to the form element for it to work. You can use the submit function to trigger the event from any other element or set of conditions. For example, you could auto-submit the form if the user is leaving the page.

The most common use of the submit function is to attach an event handler for the submit event. For example:

$("#form1").submit(handleSubmit);

will result in handleSubmit being called when the submit event is triggered on the form with id form1. You can stop the form being submitted by returning false or using preventDefault() as in: 

function handleSubmit(e){ 
 alert("submit");
 e.preventDefault();
}

There are two reasons for intercepting the submit event. The first is to validate the data entered into the form and to ask the user to correct it before resubmitting. The second is to modify the method of sending the data to an Ajax call.

Validating form data can be achieved in many ways. There is a jQuery plugin that makes validation easier and HTML5 has validation features built into the input elements. The core of jQuery doesn't provide much to help you implement validation, but it is fairly easy and you probably don't need much help. For example, to validate a simple user name input field so that it is only accepted if there are no digits you would use something like:

function handleSubmit(e){ 
 var form=$("#form1>*");
 var text=form.filter("[name='username']").val();
 if( /[0-9]/.test(text)===false) return true;
 return false;
}

This works by first finding the form, then extracting its immediate children and then the value of the username input element. Finally the if statement uses a regular expression to test to see if it contains any digits – if it does then we return false.

You can write this in a shorter form:

function handleSubmit(e){
 var form=$("#form1>*");
 var valid= /[0-9]/.test(
    form.filter("[name='username']").val());
 return !valid; 
}

This generalizes to the idiom:

var valid= /regex/.test(
       form.filter("[name='name']").val());

where regex is a regular expression that the field corresponding to name has to satisfy to be valid. Of course, in a form with multiple fields you would test each field and flag the errors for the user before aborting the submit event. You can also test to make sure that a field has an entry if it is a required field. 

HTML5 has all of this built into its input types. You can specify a pattern attribute, which is a regex that the field has to make true to be valid, and there is a required attribute which stops the submit unless there is an entry. You can see that it is fairly easy to implement these features and more using simple JavaScript.

Hooking into the submit event is a good way to validate a form when it is complete but users prefer to be informed if something is wrong with a field while they are entering it rather than when the form is complete. You can implement a more immediate feedback using the change() function which can be used to trigger a change event or set a handler for a change event. You can set a change event handler for any input elements, textarea and select elements. In the case of select, checkboxes and radio buttons, the event occurs as soon as any change is made. For the others the event is deferred until the element loses focus and the user moves on to another element. 

For example, to test the username input element as soon as the user has finished with it to make sure it doesn't contain any digits, as we did using the handleSubmit, you would use something like:

$("#form1>*").filter(
       "[name='username']").change(handleChange);

and the event handler would be:

function handleChange(){
 if( /[0-9]/.test( $(this).val())){
  alert("a user name cannot contain digits");
 }
}

Note that we can make use of the fact that in an event handler this references the DOM element that the event occurred on. 

In general, it is better to validate a field using the change event and get the user to attend any problems as soon as possible. Sometimes this isn't easy, but it is still worth the additional effort. For example, there is nothing more annoying that entering a user name and lots of other details only to be told that the user name is already taken following form submission. The problem is how do you validate a user name and check that it is free? The answer is, of course, to use an Ajax request for the server to validate the entry.

For some elements the change event is only triggered when the element loses focus and the user moves the cursor to some other element. The events that you can use to control what happens in response to a focus shift are:

• .focus() triggered when an element gains the focus

• .blur() triggered when focus leaves an element

• .focusin() triggered when an element or any element
  it contains gains the focus

• .focusout() triggered when an element or any element
  inside it loses the focus

There is also a more specialized event .select()that is triggered when the user selects text within a textarea or an input text element. This is more often used to implement mini-text editors and similar, than it is to validate entries.