Skip to content

Commit

Permalink
validate.password: preparing 1.0 release, including more demos
Browse files Browse the repository at this point in the history 
git-svn-id: http://jqueryjs.googlecode.com/svn/trunk/plugins/validate.password@6364 c715fcbe-d12f-0410-84c4-316a508785bb
  • Loading branch information
joern.zaefferer committed May 22, 2009
1 parent b42ee87 commit 3aa434a
Show file tree
Hide file tree
Showing 8 changed files with 5,800 additions and 129 deletions.
144 changes: 15 additions & 129 deletions demo/index.html
View file
@@ -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>
92 changes: 92 additions & 0 deletions demo/localized.html
View file
@@ -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>
139 changes: 139 additions & 0 deletions demo/milk.html
View file
@@ -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>

0 comments on commit 3aa434a

Please sign in to comment.