/lib/jquery-validate/demo/index.html
HTML | 230 lines | 213 code | 17 blank | 0 comment | 0 complexity | eef6b8c6f847d0812be91b481a2bb1a0 MD5 | raw file
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 5<title>jQuery validation plug-in - main demo</title> 6 7<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 8 9<script src="../lib/jquery.js" type="text/javascript"></script> 10<script src="../jquery.validate.js" type="text/javascript"></script> 11 12<script type="text/javascript"> 13$.validator.setDefaults({ 14 submitHandler: function() { alert("submitted!"); } 15}); 16 17$().ready(function() { 18 // validate the comment form when it is submitted 19 $("#commentForm").validate(); 20 21 // validate signup form on keyup and submit 22 $("#signupForm").validate({ 23 rules: { 24 firstname: "required", 25 lastname: "required", 26 username: { 27 required: true, 28 minlength: 2 29 }, 30 password: { 31 required: true, 32 minlength: 5 33 }, 34 confirm_password: { 35 required: true, 36 minlength: 5, 37 equalTo: "#password" 38 }, 39 email: { 40 required: true, 41 email: true 42 }, 43 topic: { 44 required: "#newsletter:checked", 45 minlength: 2 46 }, 47 agree: "required" 48 }, 49 messages: { 50 firstname: "Please enter your firstname", 51 lastname: "Please enter your lastname", 52 username: { 53 required: "Please enter a username", 54 minlength: "Your username must consist of at least 2 characters" 55 }, 56 password: { 57 required: "Please provide a password", 58 minlength: "Your password must be at least 5 characters long" 59 }, 60 confirm_password: { 61 required: "Please provide a password", 62 minlength: "Your password must be at least 5 characters long", 63 equalTo: "Please enter the same password as above" 64 }, 65 email: "Please enter a valid email address", 66 agree: "Please accept our policy" 67 } 68 }); 69 70 // propose username by combining first- and lastname 71 $("#username").focus(function() { 72 var firstname = $("#firstname").val(); 73 var lastname = $("#lastname").val(); 74 if(firstname && lastname && !this.value) { 75 this.value = firstname + "." + lastname; 76 } 77 }); 78 79 //code to hide topic selection, disable for demo 80 var newsletter = $("#newsletter"); 81 // newsletter topics are optional, hide at first 82 var inital = newsletter.is(":checked"); 83 var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); 84 var topicInputs = topics.find("input").attr("disabled", !inital); 85 // show when newsletter is checked 86 newsletter.click(function() { 87 topics[this.checked ? "removeClass" : "addClass"]("gray"); 88 topicInputs.attr("disabled", !this.checked); 89 }); 90}); 91</script> 92 93<style type="text/css"> 94#commentForm { width: 500px; } 95#commentForm label { width: 250px; } 96#commentForm label.error, #commentForm input.submit { margin-left: 253px; } 97#signupForm { width: 670px; } 98#signupForm label.error { 99 margin-left: 10px; 100 width: auto; 101 display: inline; 102} 103#newsletter_topics label.error { 104 display: none; 105 margin-left: 103px; 106} 107</style> 108 109</head> 110<body> 111 112<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1> 113<div id="main"> 114 115<p>Default submitHandler is set to display an alert into of submitting the form</p> 116 117<form class="cmxform" id="commentForm" method="get" action=""> 118 <fieldset> 119 <legend>Please provide your name, email address (won't be published) and a comment</legend> 120 <p> 121 <label for="cname">Name (required, at least 2 characters)</label> 122 <input id="cname" name="name" class="required" minlength="2" /> 123 <p> 124 <label for="cemail">E-Mail (required)</label> 125 <input id="cemail" name="email" class="required email" /> 126 </p> 127 <p> 128 <label for="curl">URL (optional)</label> 129 <input id="curl" name="url" class="url" value="" /> 130 </p> 131 <p> 132 <label for="ccomment">Your comment (required)</label> 133 <textarea id="ccomment" name="comment" class="required"></textarea> 134 </p> 135 <p> 136 <input class="submit" type="submit" value="Submit"/> 137 </p> 138 </fieldset> 139</form> 140 141<form class="cmxform" id="signupForm" method="get" action=""> 142 <fieldset> 143 <legend>Validating a complete form</legend> 144 <p> 145 <label for="firstname">Firstname</label> 146 <input id="firstname" name="firstname" /> 147 </p> 148 <p> 149 <label for="lastname">Lastname</label> 150 <input id="lastname" name="lastname" /> 151 </p> 152 <p> 153 <label for="username">Username</label> 154 <input id="username" name="username" /> 155 </p> 156 <p> 157 <label for="password">Password</label> 158 <input id="password" name="password" type="password" /> 159 </p> 160 <p> 161 <label for="confirm_password">Confirm password</label> 162 <input id="confirm_password" name="confirm_password" type="password" /> 163 </p> 164 <p> 165 <label for="email">Email</label> 166 <input id="email" name="email" /> 167 </p> 168 <p> 169 <label for="agree">Please agree to our policy</label> 170 <input type="checkbox" class="checkbox" id="agree" name="agree" /> 171 </p> 172 <p> 173 <label for="newsletter">I'd like to receive the newsletter</label> 174 <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> 175 </p> 176 <fieldset id="newsletter_topics"> 177 <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> 178 <label for="topic_marketflash"> 179 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> 180 Marketflash 181 </label> 182 <label for="topic_fuzz"> 183 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> 184 Latest fuzz 185 </label> 186 <label for="topic_digester"> 187 <input type="checkbox" id="topic_digester" value="digester" name="topic" /> 188 Mailing list digester 189 </label> 190 <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> 191 </fieldset> 192 <p> 193 <input class="submit" type="submit" value="Submit"/> 194 </p> 195 </fieldset> 196</form> 197 198<h3>Syntetic examples</h3> 199<ul> 200 <li><a href="errorcontainer-demo.html">Error message containers in action</a></li> 201 <li><a href="custom-messages-metadata-demo.html">Custom Messages as Metadata</a></li> 202 <li><a href="radio-checkbox-select-demo.html">Radio and checkbox buttons and selects</a></li> 203 <li><a href="ajaxSubmit-intergration-demo.html">Integration with Form Plugin (AJAX submit)</a></li> 204 <li><a href="custom-methods-demo.html">Custom methods and message display.</a></li> 205 <li><a href="dynamic-totals.html">Dynamic forms</a></li> 206 <li><a href="themerollered.html">Forms styled with jQuery UI Themeroller</a></li> 207</ul> 208<h3>Real-world examples</h3> 209<ul> 210 <li><a href="milk/">Remember The Milk signup form</a></li> 211 <li><a href="marketo/">Marketo signup form</a></li> 212 <li><a href="multipart/">Buy and Sell a House multipart form</a></li> 213 <li><a href="captcha/">Remote captcha validation</a></li> 214</ul> 215 216<h3>Testsuite</h3> 217<ul> 218 <li><a href="../test/">Validation Testsuite</a></li> 219</ul> 220 221</div> 222 223<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 224</script> 225<script type="text/javascript"> 226_uacct = "UA-2623402-1"; 227urchinTracker(); 228</script> 229</body> 230</html>