JQuery_ Novice to Ninja - Earle Castledine [95]
JavaScript stepped in to help simple HTML form elements emulate many of the more sophisticated and interactive input controls found in desktop applications, but the code has often been unwieldy and bloated. jQuery allows us to simplify control creation and lets us concentrate on turning our ideas into functioning controls quickly and elegantly.
And it’s lucky for us that it’s quick! Our client is keen to build on the fancy Ajax controls we’ve built for him. Now that he has his buzzword-compliant features, he concedes that he probably should have first fixed up some of the forms on the site, which now look painfully 1999 in comparison. He wants “some inline editing, fancy form validation messages, cool dialog boxes, and everything—everything—should be drag and droppable, like it’s a web site from the future!” Fortunately for us, jQuery lets us build web sites from the future.
Forms
HTML forms are old. And a bit clunky. And browsers vary wildly in how they deal with them. Yet, thanks to JavaScript, these forms have become the basis for some amazingly cool web applications. As always, if JavaScript can do it, jQuery can make it fun!
We know the drill by now: form elements are DOM elements, so jQuery is great at manipulating them. But form elements aren’t your typical DOM elements, so there are a handful of special jQuery tricks for dealing with them more specifically. We’ve seen quite a few of them throughout the book so far—but now it’s time to focus on them a little more closely.
Simple Form Validation
Form validation is essential, even if it often seems boring. However, proper, well-designed and implemented forms can make or break how your users perceive your site. Who hasn’t had the experience of giving up on a web site because of a particularly frustrating form?
Important: Server-side Form Validation
Client-side form validation with jQuery should only be used to assist your users in filling out a form, and should never be relied upon to prevent certain types of data being sent to the server. Users with JavaScript disabled will be unhindered by your jQuery validation, so they can submit any values they want. Because of this, if there’s any security risk from users submitting malicious data through your forms, that data needs to be thoroughly validated on the server side.
Although jQuery avoids dealing with the nitty-gritty of form validation, it does provide some convenient methods for accessing and setting form values—and that’s half the battle! You can select form fields like any other element, but there are some extra filters to make your code more efficient and readable.
The :input filter, for example, selects all elements that are inputs, select boxes, textareas, or buttons. You’d use it as you would any filter. Here’s how we’d give all of our form elements a lovely lemon chiffon background:
$('#myForm:input').css('background-color', 'lemonchiffon')
If you want to be more choosy about which elements you’re selecting, there are a number of more specific form element filters: :text, :password, :radio, :checkbox, :submit, :button, :image (for image buttons), and :file. And remember, you’re free to apply multiple filters in a single selection.
Furthermore, there are some additional filters that let you select form elements based on their state and value. The :enabled and :disabled filters will fetch elements based on their disabled attribute, and :checked and :selected help you find radio buttons, select box items, and checkboxes that are checked or selected.
Tip: :checked and :selected in Conditional Logic
These filters are particularly helpful when you need to perform different actions depending on the checked or selected state of