Blame | Letzte Änderung | Log anzeigen | RSS feed
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Remember The Milk signup form - jQuery Validate plugin demo - with friendly permission from the RTM team</title><link rel="stylesheet" href="milk.css"><script src="../../lib/jquery.js"></script><script src="../../lib/jquery.mockjax.js"></script><script src="../../dist/jquery.validate.js"></script><script>$(document).ready(function() {$.mockjax({url: "emails.action",response: function(settings) {var email = settings.data.email,emails = ["glen@marketo.com", "george@bush.gov", "me@god.com", "aboutface@cooper.com", "steam@valve.com", "bill@gates.com"];this.responseText = "true";if ($.inArray(email, emails) !== -1) {this.responseText = "false";}},responseTime: 500});$.mockjax({url: "users.action",response: function(settings) {var user = settings.data.username,users = ["asdf", "Peter", "Peter2", "George"];this.responseText = "true";if ($.inArray(user, users) !== -1) {this.responseText = "false";}},responseTime: 500});// validate signup form on keyup and submitvar validator = $("#signupform").validate({rules: {firstname: "required",lastname: "required",username: {required: true,minlength: 2,remote: "users.action"},password: {required: true,minlength: 5},password_confirm: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,email: true,remote: "emails.action"},dateformat: "required",terms: "required"},messages: {firstname: "Enter your firstname",lastname: "Enter your lastname",username: {required: "Enter a username",minlength: jQuery.validator.format("Enter at least {0} characters"),remote: jQuery.validator.format("{0} is already in use")},password: {required: "Provide a password",minlength: jQuery.validator.format("Enter at least {0} characters")},password_confirm: {required: "Repeat your password",minlength: jQuery.validator.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.validator.format("{0} is already in use")},dateformat: "Choose your preferred dateformat",terms: " "},// the errorPlacement has to take the table layout into accounterrorPlacement: function(error, element) {if (element.is(":radio"))error.appendTo(element.parent().next().next());else if (element.is(":checkbox"))error.appendTo(element.next());elseerror.appendTo(element.parent().next());},// specifying a submitHandler prevents the default submit, good for the demosubmitHandler: function() {alert("submitted!");},// set this class to error-labels to indicate valid fieldssuccess: function(label) {// set as text for IElabel.html(" ").addClass("checked");},highlight: function(element, errorClass) {$(element).parent().next().find("." + errorClass).removeClass("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).toLowerCase();}});});</script></head><body><h1 id="banner"><a href="https://jqueryvalidation.org/">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></body></html>