Permalink
Browse files

validate: first prototype for password validation including password …

…strength meter

git-svn-id: http://jqueryjs.googlecode.com/svn/trunk/plugins/validate.password@5832 c715fcbe-d12f-0410-84c4-316a508785bb
  • Loading branch information...
0 parents commit 7d428f10d1c12961d403c3d0e0b7cb9b34b65761 joern.zaefferer committed Aug 19, 2008
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,166 @@
+<!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" />
+
+<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>
+
+<style type="text/css">
+.password-meter {
+ position:relative;
+ top: 20px;
+ background: #e0e0e0;
+ width: 180px;
+}
+.password-meter-bar {
+ height: 4px;
+}
+.password-meter-weak {
+ background: red;
+ width: 20px;
+}
+.password-meter-good {
+ background: blue;
+ width: 140px;
+}
+.password-meter-strong {
+ background: green;
+ width: 180px;
+}
+
+</style>
+
+<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: {
+ required: true,
+ password: true
+ },
+ password_confirm: {
+ required: true,
+ equalTo: "#password"
+ }
+ },
+ messages: {
+ username: {
+ required: "Enter a username",
+ minlength: jQuery.format("Enter at least {0} characters")
+ },
+ 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"
+ }
+ },
+ // the errorPlacement has to take the table layout into account
+ errorPlacement: function(error, element) {
+ 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 &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>
+
+<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-bar"></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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 7d428f1

Please sign in to comment.