What is it?

jQuery.validity is an elegant and powerful jQuery plug-in you can use to setup client-side form validation. Instead of writing validation manually or balancing some unwieldy server-side framework, validity allows you to design client-side validation in a manner that feels natural and straightforward.

jQuery.validity is easy to learn and use. It's totally appropriate in simple validation scenarios, but it's also designed to cleanly and naturally tackle more complex, dynamic, or conditional scenarios.

jQuery.validity takes advantage of jQuery's selector engine to perform validation on logical groupings of inputs, making it declarative and clean. This means that the inputs on a page can be added, removed, or changed and validation will still work without reconfiguration.

jQuery.validity is designed to give you total control over how validation messages appear, so you can easily adapt the way validation errors are displayed to the look and feel of your site.

In short, Validity was conceived with three goals:

  1. Easy Setup: Validity employs the principle of Convention Over Configuration to keep code manageable and semantic. Very little work is required to put Validity on your page.
  2. Unobtrusive JavaScript: Using Validity will have almost no effect on your markup. Additionally, Validity will degrade gracefully - leaving no residuals in browser environments where JavaScript is disabled or unsupported.
  3. Customizable Appearance: Validity delivers a solid core-library of validation tools that can be used in any web-design. So, in order to be truly versatile, Validation logic is separated from the way it displays errors. With Validity, you, the developer, have full control of error handling and adapting it to the design of your page.

Try it!

Below is a live example. The first field is required, and must be a number between 4 and 12. The second field must be a date before today:

[View Source]
    <html>
        <head>
            <title>Simple</title>
            
            <link type="text/css" rel="Stylesheet" href="jquery.validity.css" />
            <script type="text/javascript" src="jquery.js"> </script>
            <script type="text/javascript" src="jquery.validity.js"> </script>
            
            <script type="text/javascript">
            
                //
                // This is where validation rules are assigned:
                //
                
                $(function() { 
                
                    $("form").validity(function() {
                    
                        $("#vehicles")
                            .require()
                            .match("number")
                            .range(4, 12);
                        
                        $("#dob")
                            .require()
                            .match("date")
                            .lessThanOrEqualTo(new Date());
                            
                    });
                    
                });
                
                //
                // That's it!
                // No more setup is necessary!
                //
                
            </script>
            
        </head>
        
        
        <body>
        
            <form method="get" action="simple.htm">
                Number of Vehicles:
                <input type="text" id="vehicles" name="vehicles" title="Vehicle Count" />
                <br /><br />
                Date of birth:
                <input type="text" id="dob" name="dob" title="Birthday" />
                (mm-dd-yyyy)
                <br /><br />
                <input type="submit" />
            </form>
            
        </body>
    </html>

Get It!

jQuery.validity is easy to install and lightweight: the JavaScript is only 11KB.

Download...

http://code.google.com/p/validity/