<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>
|
Stumble It!
Bookmark in del.icio.us
Download
