Course List >> Javascript and jQuery >> Better Forms with jQuery and AJAX >> 1: Validating Form Inputs Using jQuery
Scroll up or hover over the breadcrumbs to view the navigation bar

Validating Form Inputs Using jQuery

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.

Points to Ponder

  • 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?

Your Assignment

  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

From the creators of The Odin Project...

The Viking Code School
Viking ad 180x150