jquery.requiredfields.js
timmy willison

Minimalistic form validation for all browsers (IE6+, Firefox, Opera, Safari, Chrome)

Version: 1.1, Last updated: 12/3/2010

Demo - http://timmywillison.com/samples/requiredfields/
GitHub - http://github.com/timmywil/requiredfields
Source - http://github.com/timmywil/requiredfields/raw/master/jquery.requiredfields.js (4.4kb)
(Minified) - http://github.com/timmywil/requiredfields/raw/master/jquery.requiredfields.min.js (1.3kb)</br/>

License

Copyright (c) 2010 timmy willison
Dual licensed under the MIT and GPL licenses.
http://timmywillison.com/licence/

Support and Testing

Versions of jQuery and browsers this was tested on.

jQuery Versions - 1.3.0-1.4.4
Browsers Tested - Internet Explorer 6-8, Firefox 2-3.7, Safari 3-5,
Chrome 4-7, Opera 9.6-10.5.

Release History

1.1 - (12/3/2010) Important update to email validation regex (wasn't anchored)
1.0 - (9/30/2010) Add individual field validation
0.9 - (9/23/2010) Initial release

PURPOSE OF THIS VALIDATION PLUGIN

To provide the most often needed requirements for client-side validation without getting bogged down in a ton of useful, but often unnecessary, form validation like the most popular plugins. At least for me, I like download sizes to be small. If I don't use it, I don't want it. I can handle what stuff looks like when they're invalid. I can add my own error messages with less code than a plugin can do it for me and I bet you can too. Nothing ever looks the same on two different sites anyway. So which code do I actually use consistently? Well, this.

VALIDATION USAGE

Initialize:

$('form').validate();

validate() applies a pre-made submit function to the selected form(s).
It runs checkForm() and stops submit if the form is invalid.

You may also use checkForm() in your own submit function instead. Like so:

  $('form').submit(function () {
      if ( !$(this).checkForm() ) {
          // The form is invalid
          // Invalid classes have been added to invalid fields
          // You can add error messages to the DOM, alerts, anything you want
          return false;
      }
      
      // If we're past the if statement, the form is valid and 
      // we can let the submit go through so we don't do anything
  });

checkForm() takes at most 1 form and returns a boolean indicating whether the form is valid.
It is the same function that applies the invalid classes to invalid fields.

Write your own css for .invalid inputs:

.invalid {
    color: red !important;
}

Add class 'reqd' to required text and select fields:

<input type="text" class="reqd"/>
<select class="reqd">
  <option value="">Pick Something</option>
  <option value="Barn">Yard</option>
</select>

Add class 'reqd-email' to required e-mail fields:

<input type="text" class="reqd-email"/>
<input type="email" class="reqd-email"/>

Summary

All this plugin does is add a class of 'invalid' to all required text inputs (and to labels that are placed before the inputs),
email inputs, and select fields that have not been properly filled out.
It is the responsibility of the user to make invalid states look how they should.