jQuery Forms

Introduction

Forms are the user’s window into your back end. You’ve learned a whole lot about them in previous lessons, but here we’ll focus on using jQuery to interact with your forms and in the next lesson we’ll look at actually submitting them asynchronously with AJAX.

You’ve already got all the tools you need to use Javascript to validate your user’s inputs, but you probably haven’t used them in this way before.

Learning Objectives

• How do you select a particular form input with jQuery?
• How do you select the currently active (focused) form input?
• How do you activate the next form input?
• How do you determine whether a checkbox or radio button is checked using jQuery?
• How do you run validations on the user’s form input in real time?
• Why is front-end form validation not sufficient to protect against malicious users?
• How do you disable a form element?
• How do you cause the erroneous form input to be highlighted and red?
• How do you add an error message directly above the input field that’s wrong?
• What is the jQuery Validate plugin and how do you include it in your project?

Study

1. Read Smashing Magazine on Web Form Validation Best Practices and Tutorials to learn just about everything you need to know here.

2. Browse the Documentation for the jQuery Validation Plugin to get you up and running with it, saving lots of time and effort.

3. Read An approach to form validation using jQuery from Scratch to see this stuff in action.

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

• Smashing Magazine on an approach to Form Field Validation Errors
• SO Answer on How to Improve a Form Validation Script (see answers)
• 10 Useful jQuery Form Validation Techniques from speckyboy (some broken links)
• An Extensive Guide to Web Form Usability from Smashing Magazine