Check Password Strength using Jquery, and check the User form Registration validation
Password strength checking is an easy way to show the strength of user password on the registration forms. It helps users to choose more secure password when filling the forms.
The idea is that every time a user enters a character, the contents is evaluated to test the strength of the password they have entered... I'm sure everyone has seen these before.
The idea is that every time a user enters a character, the contents is evaluated to test the strength of the password they have entered... I'm sure everyone has seen these before.
<link href="FormValidation.css" rel="stylesheet" type="text/css" /> <link href="jquery.validate.password.css" rel="stylesheet" type="text/css" /> <script src="JS/jquery.js" type="text/javascript"></script> <script src="JS/jquery.validate.js" type="text/javascript"></script> <script src="JS/jquery.validate.password.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript"> $(document).ready(function() { // validate signup form on keyup and submit var validator = $("#divCreateNewUser").validate({ rules: { username: { required: true, minlength: 2 }, txtPassword: { password: "#username" }, password_confirm: { required: true, equalTo: "#password" }, location: { required: true } }, 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" }, location: { required: "Enter a Location" } }, // the errorPlacement has to take the table layout into account errorPlacement: function(error, element) { error.prependTo(element.parent().next()); }, // set this class to error-labels to indicate valid fields success: function(label) { // set as text for IE label.html(" ").addClass("checked"); } }); }); </script>
<body>
<form id="signupform1" runat="server">
<div id="signupwrap" runat="server">
<table align="center">
<tr>
<td></td>
<td><b>User Registration</b></td>
<td></td>
</tr>
<tr>
<td align="right" class="label">UserName:</td>
<td class="field"><asp:TextBox ID="username" runat="server"/></td>
<td class="status"></td>
</tr>
<tr>
<td align="right" class="label">Password:</td>
<td class="field"><asp:TextBox ID="txtPassword" runat="server" TextMode="Password"/></td>
<td class="status" align="left">
<div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</td>
</tr>
<tr><td align="right" class="label">Confirm Password:</td>
<td class="field"><asp:TextBox ID="password_confirm" runat="server" TextMode="Password"/></td>
<td class="status"></td>
</tr>
<tr>
<td align="right" class="label">Location:</td>
<td class="field"><asp:TextBox ID="location" runat="server"/></td>
<td class="status"></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnSubmit" Text="Submit" runat="server"
onclick="btnSubmit_Click" /></td>
<td></td>
</tr>
<tr>
<td colspan="3" height="20px">
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<table>
<tr>
<td>UserName:</td>
<td><asp:Label ID="lbluser" runat="server"/></td>
</tr>
<tr>
<td>Password:</td>
<td><asp:Label ID="lblPwd" runat="server"/></td>
</tr>
<tr>
<td>Location:</td>
<td><asp:Label ID="lblLocation" runat="server"/></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
Out-put of the above code
No comments:
Post a Comment