Validating Form Inputs Using jQuery

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 Outcomes

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

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.

Javascript and jQuery

Validating Form Inputs Using jQuery

Got questions?

Chat with our friendly Odin community in our Gitter chatrooms!

Open Gitter

Are you interested in a more immersive web development learning experince?

Learn more

Viking Code School

  • 12 weeks

    12 Weeks

  • Fully Online

    Fully Online

  • Mentorship

    Mentorship