Permalink
Browse files

validate.password: preparing 1.0 release, including more demos

git-svn-id: http://jqueryjs.googlecode.com/svn/trunk/plugins/validate.password@6364 c715fcbe-d12f-0410-84c4-316a508785bb
  • Loading branch information...
1 parent b42ee87 commit 3aa434a0c962ea94953a45052445e75159cd270e joern.zaefferer committed May 22, 2009
Showing with 5,800 additions and 129 deletions.
  1. +15 −129 demo/index.html
  2. +92 −0 demo/localized.html
  3. +139 −0 demo/milk.html
  4. +51 −0 demo/plain.html
  5. +15 −0 jquery.validate.password.js
  6. BIN jquery.validate.password.zip
  7. +4,376 −0 lib/jquery.js
  8. +1,112 −0 lib/jquery.validate.js
View
@@ -1,140 +1,26 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html>
<html>
<head>
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Validation Plugin Password Extension demo</title>
-<link rel="stylesheet" type="text/css" media="screen" href="milk.css" />
-<link rel="stylesheet" type="text/css" media="screen" href="../jquery.validate.password.css" />
-
-<script type="text/javascript" src="../../validate/lib/jquery.js"></script>
-<script type="text/javascript" src="../../validate/jquery.validate.js"></script>
-<script type="text/javascript" src="../jquery.validate.password.js"></script>
-
-<script id="demo" type="text/javascript">
-$(document).ready(function() {
- // validate signup form on keyup and submit
- var validator = $("#signupform").validate({
- rules: {
- username: {
- required: true,
- minlength: 2
- },
- password: {
- password: "#username"
- },
- password_confirm: {
- required: true,
- equalTo: "#password"
- }
- },
- messages: {
- username: {
- required: "Enter a username",
- minlength: 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"
- }
- },
- // the errorPlacement has to take the table layout into account
- errorPlacement: function(error, element) {
- error.prependTo( 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 &nbsp; as text for IE
- label.html("&nbsp;").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>
+<style>
+ iframe { width: 800px; height: 75px; }
+ iframe.milk { height: 500px; }
+ a { display: block; }
+</style>
</head>
-<body>
-
-<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin Password Extension </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="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">
- <div class="password-meter">
- <div class="password-meter-message">&nbsp;</div>
- <div class="password-meter-bg">
- <div class="password-meter-bar"></div>
- </div>
- </div>
- </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="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>
+<body>
+
+ <iframe src="plain.html"></iframe>
+ <a href="plain.html">Plain</a>
+ <iframe src="localized.html"></iframe>
+ <a href="localized.html">Localized</a>
+ <iframe src="milk.html" class="milk"></iframe>
+ <a href="milk.html">Integrated</a>
</body>
</html>
View
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>jQuery Validation Plugin Password Extension demo</title>
+
+<script type="text/javascript" src="../lib/jquery.js"></script>
+<script type="text/javascript" src="../lib/jquery.validate.js"></script>
+<script type="text/javascript" src="../jquery.validate.password.js"></script>
+
+<script id="demo" type="text/javascript">
+$.validator.passwordRating.messages = {
+ "similar-to-username": "Zu ähnlich zum Benutzername",
+ "too-short": "Zu kurz",
+ "very-weak": "Sehr schwach",
+ "weak": "Schwach",
+ "good": "Gut",
+ "strong": "Ausgezeichnet"
+}
+$(document).ready(function() {
+ $("#register").validate();
+ $("#password").valid();
+
+});
+</script>
+<style>
+label {
+ width: 7em;
+ float: left;
+}
+label.error { display: none !important; }
+.password-meter-label {
+ color: #666;
+ float: left;
+ width: 7em;
+ padding: 0;
+}
+.password-meter {
+ width: 190px;
+ margin-left: 7em;
+ vertical-align: middle;
+}
+.password-meter-message {
+ float: left;
+ text-align: center;
+ font-weight: bold;
+ color: black;
+ padding-left: 5px;
+ background: #eee;
+ height: 18px;
+ width: 221px;
+}
+
+.password-meter-message-very-weak {
+ background: #ff8080;
+}
+.password-meter-message-weak {
+ background: #fffb80;
+}
+.password-meter-message-good {
+ background: #80d1ff;
+}
+.password-meter-message-strong {
+ background: #8cff80;
+}
+</style>
+
+</head>
+<body>
+
+<form id="register">
+ <div style="clear:both">
+ <label for="password">Passwort:</label>
+ <input class="password" name="password" id="password" />
+ </div>
+ <label class="password-meter-label" for="password">Passwortstärke:</label>
+ <div class="password-meter">
+ <div class="password-meter-message">
+ &nbsp;
+ </div>
+ </div>
+</form>
+
+<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
+</script>
+<script type="text/javascript">
+_uacct = "UA-2623402-1";
+urchinTracker();
+</script>
+
+</body>
+</html>
View
@@ -0,0 +1,139 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>jQuery Validation Plugin Password Extension demo</title>
+
+<link rel="stylesheet" type="text/css" media="screen" href="milk.css" />
+<link rel="stylesheet" type="text/css" media="screen" href="../jquery.validate.password.css" />
+
+<script type="text/javascript" src="../lib/jquery.js"></script>
+<script type="text/javascript" src="../lib/jquery.validate.js"></script>
+<script type="text/javascript" src="../jquery.validate.password.js"></script>
+
+<script id="demo" type="text/javascript">
+$(document).ready(function() {
+ // validate signup form on keyup and submit
+ var validator = $("#signupform").validate({
+ rules: {
+ username: {
+ required: true,
+ minlength: 2
+ },
+ password: {
+ password: "#username"
+ },
+ password_confirm: {
+ required: true,
+ equalTo: "#password"
+ }
+ },
+ messages: {
+ username: {
+ required: "Enter a username",
+ minlength: 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"
+ }
+ },
+ // the errorPlacement has to take the table layout into account
+ errorPlacement: function(error, element) {
+ error.prependTo( 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 &nbsp; as text for IE
+ label.html("&nbsp;").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>
+
+<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="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">
+ <div class="password-meter">
+ <div class="password-meter-message">&nbsp;</div>
+ <div class="password-meter-bg">
+ <div class="password-meter-bar"></div>
+ </div>
+ </div>
+ </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="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>
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 3aa434a

Please sign in to comment.