ht5ifv

HTML5 inline form validator

Getting start...

How to use it

Include these lines into your html head section 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" 
type="text/javascript" charset="UTF-8"></script>

<link rel="stylesheet" type="text/css" media="screen" href="http://serprest.pt/jquery/ht5ifv.css"/>
<script type="text/javascript" src="http://serprest.pt/jquery/jquery.ht5ifv.js" charset="UTF-8"></script>

<script type="text/javascript" charset="UTF-8">       
	$(document).ready(function(){
		$('form').ht5ifv();
	});
</script>
See example 0

Customization

You can customize the how, the where, the when and the what
So, In a hurry...

How

How the non conforming fields are flagged is controlled through the use of state classes (CSS classes).
The developer can define CSS classes for each (sub)state as follow: 
$(document).ready(function(){
   $('#fexample1').ht5ifv({
      classes:{
         invalid: 'myInvalidClass',
         valid: '', //don't flag valid fields
         required: 'myRequiredClass', //use this class to flag required fields
         //for the remaining sub-states use the defaults (see ht5ifv.css);
      }
   });
});
See example 1

Where

Where the non conforming fields are flagged may be controlled through the user defined functions as follow: 
$(document).ready(function(){
   $('#fexample1').ht5ifv({
      targets:{
         invalid: function($this){return $this.parent()},
         pattern: function($this){return $this.parent().children('span')},
         //for the remaining sub-states use the defaults, which is: function($this){return $this};
      }
   });
});
See example 2 and example 3

When

When the conformity should be validate or checked may also be defined: 
$(document).ready(function(){
  $('#fexample1').ht5ifv({
    events:{
      check: 'keyup.ht5ifv mouseover.ht5ifv mouseout.ht5ifv',
      validate: 'keydown.ht5ifv focus.ht5ifv',
    }
  });
});
See example 4 and example 5
The check events trigger the action to check if the field is valid or invalid. In fact it computes the field final state
The validate events trigger the validation of each restriction. It computes the field sub-states

What

By default the ht5ifv verify the type conform and the min, max, required and pattern restrictions, when the field type has these attributes defined by W3C.
If need the developer could change, suppress, or even add new restrictions
For the example below the programmer specified that the type password must have an additional restriction through the use of a HTML5 user defined attribute data-min-length
$(document).ready(function(){
   $('#fexample1').ht5ifv({
        restrictions:{
           'data-min-length': function($node,$ignoreEmpty){
              var $v = $node.val();
              var $l = $v.length;
              var $m = $v.data('minLength');    //see jquery 1.6 .data() method
              return ($v =='' && $ignoreEmpty ) || $l >= $m        
           }
        }
   });
});
See example 6

Extra features: Callbacks

It also possible to define callbacks which will be invoked every time a validate action detected a non conform value, or when a check action is performed
The developer may set a unique callback function for all the possible events or define a function to every event
$(document).ready(function(){
   $('#fexample1').ht5ifv({
      callbacks:function($node,$event){
         if ($event === 'valid') return;
         if ($event === 'required') alert('You cannot leave the field ' + $node.attr('name') + ' Empty');
         //do something else
      }
   });
});
See example 7. In this example we use Pines Notify to show how easy we may implement messages
Alternatively, a callback function for each restriction can be defined 
$(document).ready(function(){
   $('#fexample1').ht5ifv({
      callbacks:{
         invalid: function($node){alert('The field ' + $node.attr('name') + ' is invalid')},
         pattern: function($node){alert('The field ' + $node.attr('name') + ' has a invalid format')},
         //do something else
      }
   });
});
See example 8
What next?