/lib/jquery-validate/demo/milk/index.html
HTML | 235 lines | 213 code | 22 blank | 0 comment | 0 complexity | a0827b19a38c0e39dbd1cab333f82e95 MD5 | raw file
Possible License(s): LGPL-2.1, Apache-2.0, BSD-3-Clause
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
- <title>Remember The Milk signup form - jQuery Validate plugin demo - with friendly permission from the RTM team</title>
- <link rel="stylesheet" type="text/css" media="screen" href="milk.css" />
- <link rel="stylesheet" type="text/css" media="screen" href="../css/chili.css" />
- <script src="../../lib/jquery.js" type="text/javascript"></script>
- <script src="../../jquery.validate.js" type="text/javascript"></script>
- <style type="text/css">
- pre { text-align: left; }
- </style>
- <script id="demo" type="text/javascript">
- $(document).ready(function() {
- // validate signup form on keyup and submit
- var validator = $("#signupform").validate({
- rules: {
- firstname: "required",
- lastname: "required",
- username: {
- required: true,
- minlength: 2,
- remote: "users.php"
- },
- password: {
- required: true,
- minlength: 5
- },
- password_confirm: {
- required: true,
- minlength: 5,
- equalTo: "#password"
- },
- email: {
- required: true,
- email: true,
- remote: "emails.php"
- },
- dateformat: "required",
- terms: "required"
- },
- messages: {
- firstname: "Enter your firstname",
- lastname: "Enter your lastname",
- username: {
- required: "Enter a username",
- minlength: jQuery.format("Enter at least {0} characters"),
- remote: jQuery.format("{0} is already in use")
- },
- password: {
- required: "Provide a password",
- rangelength: jQuery.format("Enter at least {0} characters")
- },
- password_confirm: {
- required: "Repeat your password",
- minlength: jQuery.format("Enter at least {0} characters"),
- equalTo: "Enter the same password as above"
- },
- email: {
- required: "Please enter a valid email address",
- minlength: "Please enter a valid email address",
- remote: jQuery.format("{0} is already in use")
- },
- dateformat: "Choose your preferred dateformat",
- terms: " "
- },
- // the errorPlacement has to take the table layout into account
- errorPlacement: function(error, element) {
- if ( element.is(":radio") )
- error.appendTo( element.parent().next().next() );
- else if ( element.is(":checkbox") )
- error.appendTo ( element.next() );
- else
- error.appendTo( element.parent().next() );
- },
- // specifying a submitHandler prevents the default submit, good for the demo
- submitHandler: function() {
- alert("submitted!");
- },
- // set this class to error-labels to indicate valid fields
- success: function(label) {
- // set as text for IE
- label.html(" ").addClass("checked");
- }
- });
-
- // propose username by combining first- and lastname
- $("#username").focus(function() {
- var firstname = $("#firstname").val();
- var lastname = $("#lastname").val();
- if(firstname && lastname && !this.value) {
- this.value = firstname + "." + lastname;
- }
- });
- });
- </script>
- </head>
- <body>
- <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
- <div id="main">
- <div id="content">
- <div id="header">
- <div id="headerlogo"><img src="milk.png" alt="Remember The Milk" /></div>
- </div>
- <div style="clear: both;"><div></div></div>
- <div class="content">
- <div id="signupbox">
- <div id="signuptab">
- <ul>
- <li id="signupcurrent"><a href=" ">Signup</a></li>
- </ul>
- </div>
- <div id="signupwrap">
- <form id="signupform" autocomplete="off" method="get" action="">
- <table>
- <tr>
- <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
- <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
- <td class="status"></td>
- </tr>
- <tr>
- <td class="label"><label id="llastname" for="lastname">Last Name</label></td>
- <td class="field"><input id="lastname" name="lastname" type="text" value="" maxlength="100" /></td>
- <td class="status"></td>
- </tr>
- <tr>
- <td class="label"><label id="lusername" for="username">Username</label></td>
- <td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
- <td class="status"></td>
- </tr>
- <tr>
- <td class="label"><label id="lpassword" for="password">Password</label></td>
- <td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
- <td class="status"></td>
- </tr>
- <tr>
- <td class="label"><label id="lpassword_confirm" for="password_confirm">Confirm Password</label></td>
- <td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
- <td class="status"></td>
- </tr>
- <tr>
- <td class="label"><label id="lemail" for="email">Email Address</label></td>
- <td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
- <td class="status"></td>
- </tr>
- <tr>
- <td class="label"><label>Which Looks Right</label></td>
- <td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
- <table>
- <tbody>
- <tr>
- <td style="padding-right: 5px;">
- <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
- <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
- </td>
- <td style="padding-left: 5px;">
- <input id="dateformat_am" name="dateformat" type="radio" value="1" />
- <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
- </td>
- <td>
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- <tr>
- <td class="label"> </td>
- <td class="field" colspan="2">
- <div id="termswrap">
- <input id="terms" type="checkbox" name="terms" />
- <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
- </div> <!-- /termswrap -->
- </td>
- </tr>
- <tr>
- <td class="label"><label id="lsignupsubmit" for="signupsubmit">Signup</label></td>
- <td class="field" colspan="2">
- <input id="signupsubmit" name="signup" type="submit" value="Signup" />
- </td>
- </tr>
- </table>
- </form>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- _uacct = "UA-2623402-1";
- urchinTracker();
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("<a href='#'>Show script used on this page</a><br/>").appendTo("body").click(function() {
- script.toggle();
- return false;
- });
- $("<a href='#'>Show serverside script</a>").appendTo("body").click(function() {
- serverscript.toggle();
- return false;
- });
- var script = $("<code class='mix'>").html( $("#demo").html() ).wrap("<pre></pre>").parent().hide().appendTo("body");
- var serverscript;
- $.get("users.phps", function(response) {
- serverscript = $("<pre>").hide().html( response ).appendTo("body");
- })
-
- });
- </script>
- <script src="../js/chili-1.7.pack.js" type="text/javascript"></script>
- </body>
- </html>