Permalink
Browse files

Some minors changes

  • Loading branch information...
1 parent 1de76c9 commit 0ab2b9b853e17f4a348b5fa3280848afd9cb7b2a @jvverde committed Aug 29, 2011
Showing with 930 additions and 9 deletions.
  1. +718 −0 docs/api.html
  2. +1 −1 docs/docs.html
  3. +191 −0 docs/intro.html
  4. +2 −2 examples/common/nav.js
  5. +9 −4 examples/index.html
  6. +9 −2 examples/make_index.html
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -95,7 +95,7 @@ <h2>How to use it</h2>
<ul>
<li>Download it from <a href="http://github.com/jvverde/ht5ifv">GitHub</a></li>
<li>Read the <a href="intro.html">Getting Start</a></li>
- <li>See also the <a href="../examples/ex0.html">examples</a></li>
+ <li>See also the <a href="../examples/index.html">examples</a></li>
<li>Refer to <a href="api.html">API</a></li>
</ul>
</div>
View
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>ht5ifv</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet" type="text/css" media="screen" href="../../3rd-party/jquery-ui/css/sunny/jquery-ui-1.8.9.custom.css"/>
+ <!--script src="/3rd-party/jquery-ui/js/jquery-ui-1.8.9.custom.min.js" type="text/javascript" charset="UTF-8"> </script-->
+ <style type="text/css" media="screen, print">
+ body{
+ font-size:10pt;
+ font-family: sans-serif, Verdana, Arial, Helvetica;
+ width:100%;
+ heigth:100%;
+ }
+ body>div {
+ width: 1000px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top:1.3em;
+ }
+ .header{
+ width:1000px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ h1.header{
+ text-align:center;
+ font-size:250%;
+ padding:0px;
+ margin-top:0em;
+ margin-bottom:0px;
+ }
+ h2.header{
+ margin-top:0px;
+ text-align:center;
+ font-size:120%;
+ padding-top:0px;
+ }
+ div>div{
+ margin-left:1em;
+ }
+ div+div{
+ margin-top:0.6em;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="ui-widget">
+ <div class="ui-widget-shadow ui-corner-all header">
+ <h1 class="header">ht5ifv</h1>
+ <h2 class="header">HTML5 inline form validator</h2>
+ </div>
+ <div>Getting start...</div>
+ <h2>How to use it</h2>
+ <div>Include these lines into your html head section
+ <pre class="ui-widget-content ui-corner-all">
+&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
+type="text/javascript" charset="UTF-8"&gt;&lt;/script&gt;
+
+&lt;link rel="stylesheet" type="text/css" media="screen" href="http://serprest.pt/jquery/ht5ifv.css"/&gt;
+&lt;script type="text/javascript" src="http://serprest.pt/jquery/jquery.ht5ifv.js" charset="UTF-8"&gt;&lt;/script&gt;
+
+&lt;script type="text/javascript" charset="UTF-8"&gt;
+ $(document).ready(function(){
+ $('form').ht5ifv();
+ });
+&lt;/script&gt;
+ </pre>
+ </div>
+ <div>See <a href="../examples/ex0.html">example 0</a></div>
+ <h2>Customization</h2>
+ <div>You can customize the how, the where, the when and the what</div>
+ <div>So, In a hurry...</div>
+ <h3>How</h3>
+ <div>How the non conforming fields are flagged is controlled through the use of state classes (CSS classes).</div>
+ <div>The developer can define CSS classes for each (sub)state as follow:
+ <pre class="ui-widget-content ui-corner-all">
+$(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);
+ }
+ });
+});
+ </pre>
+ <div>See <a href="../examples/ex1.html">example 1</a></div>
+ </div>
+ <h3>Where</h3>
+ <div>Where the non conforming fields are flagged may be controlled through the user defined functions as follow:
+ <pre class="ui-widget-content ui-corner-all">
+$(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};
+ }
+ });
+});
+ </pre>
+ <div>See <a href="../examples/ex2.html">example 2</a> and <a href="../examples/ex3.html">example 3</a></div>
+ </div>
+ <h3>When</h3>
+ <div>When the conformity should be validate or checked may also be defined:
+ <pre class="ui-widget-content ui-corner-all">
+$(document).ready(function(){
+ $('#fexample1').ht5ifv({
+ events:{
+ check: 'keyup.ht5ifv mouseover.ht5ifv mouseout.ht5ifv',
+ validate: 'keydown.ht5ifv focus.ht5ifv',
+ }
+ });
+});
+ </pre>
+ <div>See <a href="../examples/ex4.html">example 4</a> and <a href="../examples/ex5.html">example 5</a></div>
+ <div>The check events trigger the action to check if the field is valid or invalid. In fact it computes the field
+ final state</div>
+ <div>The validate events trigger the validation of each restriction. It computes the field sub-states</div>
+ </div>
+ <h3>What</h3>
+ <div>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.
+ <div>If need the developer could change, suppress, or even add new restrictions</div>
+ <div>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</div>
+ <pre class="ui-widget-content ui-corner-all">
+$(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
+ }
+ }
+ });
+});
+ </pre>
+ <div>See <a href="../examples/ex6.html">example 6</a></div>
+ </div>
+ <h3>Extra features: Callbacks</h3>
+ <div>
+ <div>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</div>
+ <div>The developer may set a unique callback function for all the possible events or define a function to
+ every event</div>
+ <pre class="ui-widget-content ui-corner-all">
+$(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
+ }
+ });
+});
+ </pre>
+ <div>See <a href="../examples/ex7.html">example 7</a>. In this example we use
+ <a href="http://pines.sourceforge.net/pnotify/">Pines Notify</a> to show how easy we may implement messages</div>
+ </div>
+ <div>
+ Alternatively, a callback function for each restriction can be defined
+ <pre class="ui-widget-content ui-corner-all">
+$(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
+ }
+ });
+});
+ </pre>
+ <div>See <a href="../examples/ex8.html">example 8</a>
+ </div>
+ <div>What next?
+ <ul>
+ <li>Download it from <a href="http://github.com/jvverde/ht5ifv">GitHub</a></li>
+ <li>See also the <a href="../examples/index.html">examples</a></li>
+ <li>Refer to <a href="api.html">API</a></li>
+ <li>Go back to <a href="docs.html">documentation</a></li>
+ </ul>
+ </div>
+ </div>
+ </body>
+</html>
+
View
@@ -55,11 +55,11 @@ $(document).ready(function(){
}
);
$.ajax({
- url: '../docs/docs.html',
+ url: 'index.html',
type:'HEAD',
success:function(){
$('div#nav input#top').click(function(){
- window.location.href = '../docs/docs.html';
+ window.location.href = 'index.html';
})
},
error:function(){
View
@@ -4,8 +4,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="screen" href="../../3rd-party/jquery-ui/css/sunny/jquery-ui-1.8.9.custom.css">
-
-
<style type="text/css" media="screen">
body{
font-size:10pt;
@@ -55,7 +53,7 @@ <h1 class="header">ht5ifv</h1>
<h2 class="header">HTML5 inline form validator</h2>
</div>
<h2>Some examples</h2>
- <ul>
+ <ul id="index">
<li><a href="ex0.html">Example 0.html</a>
<div>Basic usage</div>
@@ -108,7 +106,14 @@ <h2>Some examples</h2>
<li><a href="ex16.html">Example 16.html</a>
<div>Redefining classes</div>
</li></ul>
- </div>
+ <div style="width: 100%; border-top: 1px solid red;"></div>
+ <ul>
+ <li>Download it from <a href="http://github.com/jvverde/ht5ifv">GitHub</a></li>
+ <li>Read the <a href="../docs/intro.html">Getting Start</a></li>
+ <li>Refer to <a href="../docs/api.html">API</a></li>
+ <li>Go back to <a href="../docs/docs.html">documentation</a></li>
+ </ul>
+</div>
View
@@ -26,7 +26,7 @@
//var $t = '';
//console.log($($d).filter('form>div:eq(1)').html());
var $t = $(html).find('div:eq(0)').html();
- $('ul').append('\n\t\t<li><a href="ex'+$n+'.html">'+'Example '+ $n + '.html</a>\n\t\t\t<div>' +$t + '</div>\n\t\t</li>');
+ $('ul#index').append('\n\t\t<li><a href="ex'+$n+'.html">'+'Example '+ $n + '.html</a>\n\t\t\t<div>' +$t + '</div>\n\t\t</li>');
make(++$n);
},
error:function(){
@@ -90,9 +90,16 @@ <h1 class="header">ht5ifv</h1>
<h2 class="header">HTML5 inline form validator</h2>
</div>
<h2>Some examples</h2>
+ <ul id="index">
+ </ul>
+ <div style="width:100%;border-top:1px solid red"></div>
<ul>
+ <li>Download it from <a href="http://github.com/jvverde/ht5ifv">GitHub</a></li>
+ <li>Read the <a href="../docs/intro.html">Getting Start</a></li>
+ <li>Refer to <a href="../docs/api.html">API</a></li>
+ <li>Go back to <a href="../docs/docs.html">documentation</a></li>
</ul>
- </div>
+</div>
</body>
</html>

0 comments on commit 0ab2b9b

Please sign in to comment.