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>
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);
}
});
});
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};
}
});
});
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',
}
});
});
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
}
}
});
});
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
}
});
});
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
}
});
});