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

Project: Validating a Form with jQuery

We'll take a step away from games and back to the real world for a relatively simple project where you'll get a chance to build and validate a form. For inspiration, go to Mint.com's signup form and see how it gives you error messages if you fail to enter the proper information.

Your Task

Build a browser form like Mint.com's which collects Email, Email Confirmation, Country, Zip Code, Password and Passowrd Confirmation fields. It should use live inline validation to inform the user whether a field is properly filled in or not. That means highlighting a field red and providing a helpful error message until it has been filled in properly.

The form doesn't need to actually submit, but you should give an error message if the button is pushed with any active errors or unfilled required fields. If all is well and the form is "submitted", give the user a high five.

Do all this using jQuery's Validate plugin but then try it without any plugins to challenge yourself. See some of the readings for examples of setting up your own validators.

  1. Set up a Github Repo for this project. Follow the instructions atop the Google Homepage project if you need help.
  2. Set up a blank HTML document
  3. Think about how you would set up the different form elements and their accompanying validators. What objects and functions will you need? A few minutes of thought can save you from wasting an hour of coding. The best thing you can do is whiteboard the entire solution before even touching the computer.
  4. Write the simple form elements. Don't worry about styling them.
  5. Build the validation logic.
  6. Test out all possible cases.
  7. Push your solution to Github and submit it below.

Student Solutions

Submit a link below to the github repo with your files in it by using a pull request. See the section on Contributing for how. Please include your partner's github handle somewhere in the description if you had one and they would like attribution.

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

  • Add some!

From the creators of The Odin Project...

The Viking Code School
Viking ad 180x150