Quick demo of how one can get the #parsley #JavaScript #form #validation framework (http://parsleyjs.org/) up and running very quickly in a #Salesforce + #bootstrap context, with verbose comments throughout on usage (and some comments what to do if not using one or both of Salesforce/Bootstrap).

Parsley.js

//Static resource called parsley contains just the parsley.js file. Ditto jQuery. In a non-sf context, 
//  I'm sure you can work it out :)
<apex:includeScript value="{!$Resource.jQuery}"/>
<apex:includeScript value="{!$Resource.parsley}"/>

//An example of using the parsley.js (http://parsleyjs.org/) form validation framework in Salesforce, 
//  on a bootstrapified page (this should[?] work equally well on a non-bootstrap page - it just uses 
//  bootstrap class names where appropriate).
//Note that as salesforce doesn't allow "custom" attributes in <apex> elements (this uses HTML5 
//  data-* attributes), this uses the javascript method of initialising parsley. In a non-sf context, 
//  this is EVEN EASIER, and is defined entirely using semantically rich attributes. Just look at 
//  http://parsleyjs.org/. Seriously easy
jQuery(document).ready(function($) {   
    
    //NB: while these all define events the listen for to do validation, validation also occurs 
    //    before submit, this just isn't stated explicitly
    
    //The first chunk of js here adds the attributes that describe the validation, which we can't 
    //  add in the vf page definition due to <apex> tags not allowing "custom" attributes
    
    //Set an input with ID ending "someStringInput" to validate maximum length on keyup and 
    //  change events
    $( 'input[id$="someStringInput"]'   ).attr('data-trigger','keyup change')
                                         .attr('data-maxlength','35');
    //Set a select with ID ending "someSelect" to validate that a value has been selected on change 
    //  events
    $( 'select[id$="someSelect"]'       ).attr('data-trigger','change')
                                         .attr('data-required','true');
    //Set an input with ID ending "someEmailInput" to validate email format (and enforce requiredness)
    //  on keyup and change events
    $( 'input[id$="someEmailInput"]'    ).attr('data-trigger','keyup change')
                                         .attr('data-type','email')
                                         .attr('data-required','true');

    //This initialises parsley against the form with ID ending in "myForm" as follows,
    //  in order to play nicely with bootstrappy things. Once you understand how it works,
    //  you should see that it's quite easy to adapt to whatever your form html looks like!
    //
    //    errorClass : 'error'
    //      > This adds the class 'error' to any items being validated (that have an error)
    //
    //    errors: { ... }
    //      > More specific customizations for errors as detailed below
    //
    //    classHandler: function(el) {
    //            return $(el).closest('.control-group');
    //        }
    //      > Instead of putting the error/success classes on the item being validated, this
    //        function instead puts the error class on the parent which has class "control-group"
    //
    //    errorsWrapper: '<span class="help-block" ></span>',
    //      > the "errorsWrapper" is a container for 1 or more errors. Overrides default <ul> 
    //        rendering
    //
    //    errorElem: '<p></p>'
    //      > each error rendered in errorsWrapper will now be wrapped in paragraph tags. 
    //        Overrides default <li> rendering
    $( 'form[id$="myForm"]' ).parsley({
        errorClass : 'error',
        errors: {
            classHandler: function(el) {
                return $(el).closest('.control-group');
            },
            errorsWrapper: '<span class="help-block" ></span>',
            errorElem: '<p></p>'
        }
    });

});