File: src/plugins/validable/demo.html

Recommend this page to a friend!
  Classes of Jonathan Gotti   jQuery Toolkit   src/plugins/validable/demo.html   Download  
File: src/plugins/validable/demo.html
Role: Example script
Content type: text/plain
Description: Documentation
Class: jQuery Toolkit
Create widgets reading options from CSS classes
Author: By
Last change: Update of src/plugins/validable/demo.html
Date: 2 years ago
Size: 2,728 bytes
 

Contents

Class file image Download
<html> <head> <link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" /> <link type="text/css" rel="stylesheet" href="../../jquery.toolkit.css" /> <link type="text/css" rel="stylesheet" href="../tooltip/jquery.tk.tooltip.css" /> <link type="text/css" rel="stylesheet" href="jquery.validable.css" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> <script type="text/javascript" src="../../jquery.toolkit.js"></script> <script type="text/javascript" src="../position/jquery.tk.position.js"></script> <script type="text/javascript" src="../tooltip/jquery.tk.tooltip.js"></script> <script type="text/javascript" src="jquery.tk.validable.js"></script> <style type="text/css"> body{ font-size:12px; } form div { vertical-align:top; } </style> </head> <body> <form action="demo.html" method="get"> <div>Email <input type="text" name="email1" id="email1" class="required email"/></div> <div><label for="email">Email</label> <input type="text" name="email" id="email" class="required email"/></div> <div><label for="noms">nom</label> <input type="text" name="nom" id="nom" class="required" minlength="2" maxlength="5"/></div> <div><label for="comment">comment</label><textarea name="comment" id="comment"></textarea></div> <div> <label for="gender">gender</label> <label><input type="radio" name="gender" value="f" id="gender"/>Female</label> <label><input type="radio" name="gender" value="m" />Male</label> </div> <div> <label>select <select name="selector"><option>24</option><option>4</option><option>2</option><option>5</option></select></label> </div> <button type="button" id="reset" title="test" class="tk-tooltip">tester</button> <input type="submit" name="submit" value="submit" /> </form> <script type="text/javascript"> $(function(){ function check24(v){return (v<24)?true:false;} $('form').validable({ useIcon:true, rules:{ nom:{rule:/^[a-z]+$/,minlength:3,required:true,help:'ne doit contenir que des lettres miniscules'}, email1:{required:true,rule:/^[^@]+@[^@]+\.[a-z]{2,3}$/,help:'Doit etre un email valide'}, email:{required:true,rule:/^[^@]+@[^@]+\.[a-z]{2,3}$/,help:'Doit etre un email valide'}, gender:{required:true,help:'choose between male and female'}, comment:{minlength:5,maxlength:10, help:'doit faire entre 5 et 10 characteres'}, selector:{required:true,help:'ne doit pas etre 24',rule:check24} } }).find(':input').css({border:'solid black 1px'}).addClass('ui-corner-all'); $.toolkit.initPlugins('tooltip'); }); </script> </body> </html>