Delphinidin

Forms are commonplace all over the Internet, whether they are forms for ecommerce and registration or search input fields. Validation ensures that Web forms accept correct data, show clear error messages when faulty data is entered, and that fields are filled out when a form is submitted. Validation is often handled on the server side by Web developers using programming languages such as PHP, JSP or ASP. Validation on the client side using JavaScript is becoming increasingly more common, in addition to server-side validation depending on the security level of the data that is being validated. Web designers who know jQuery and JavaScript can create a better user interface with forms than can a developer using backend development. jQuery offers several events (focus, blur, change) specifically to be used in forms, which I review in post before, about events. These events are not new to JavaScript, but jQuery makes it easier to use these events in conjunction with forms. In this chapter, I review many different scenarios where jQuery can help you do more with your forms. The techniques that you learn from this chapter are necessary when you work with Ajax.

- Focusing on an Input Box After Page Load
Driving focus to a particular form field on a page is a great way to direct users to perform a specific action on a page, whether it’s logging in or filling out a registration. It’s a simple script you can add to any page to ensure that the user is focused on the input right away. If you have a conversion-based ecommerce or retail Web site, this could potentially give you a small boost in conversion rates.
1. Set up the HTML form elements. For this example, set up two form input=”text” elements so that you can demonstrate using the :first filter when more than two elements are present on the page.

<input type=”text1” />
<input type=”text2” />

2. Add a statement that selects the first input and attaches the focus event to it. This ensures that when the page loads, the first input has focus applied to it:

$(‘input:first’).focus();

- Disabling and Enabling Form Elements
Disabling and enabling form elements is required in areas of a Web site where you don’t want to allow your users to change a field. One scenario that calls for disabling form elements is a multi-part form. On the first page, say that you collect information such as username, password, and e-mail address. On the second page, you collect billing addresses and payment information and confirm the information that is passed over from the first page, but as disabled form fields:

1. Set up the HTML form input element that you wish to disable aft er the page has loaded.

<input type=”text” id=”name-input” />

2. Add a statement that selects the name-input element and sets the disabled attribute or false using the attr() method:

$(“#name-input”).attr(“disabled”, “false”);

If you would like to enable the input field, just change the parameters that you pass into the attr method from disabled to enabled or true.