Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery Check Password Strength Example in asp.net | Display Validation error message with images in asp.net

Dec 26, 2011
Introduction:

In this article I will explain how to display images whenever validation fails in form using JQuery and I will explain how to check password strength using JQuery in asp.net.


Description:
  
In previous articles I explained about form validations using JavaScript  and Ajax Password Strength using asp.net . Now I will explain how to show the images when validation fails and I will explain how to show the password strength using JQuery in asp.net.
In one of the website I saw different type of form validations in registration form when we click on submit button without entering any data they are displaying error message with image just beside of particular control and they are displaying password strength based on text entered in textbox. After seen that form I decided to write post to explain how to implement this one using JQuery.

To implement this concept first open Visual Studio and create new website after that right click on your website and add two new folders and give name as Images and JS and insert images and script files in particular folders you should get it from attached folder. After that write the following code in your aspx page 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery Validate Form and Show Password Strength</title>
<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 = $("#signupform").validate({
rules: {
username: {
required: true,
minlength: 2
},
password: {
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 &nbsp; as text for IE
label.html("&nbsp;").addClass("checked");
}
});
});
</script>
</head>
<body>
<form id="signupform" runat="server">
<div id="signupwrap">
<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="password" runat="server" TextMode="Password"/></td>
<td class="status" align="left">
<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 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"/></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>
</html>
If you observe above code in header section I added some of script files and css files by using those files we have a chance to show password strength based on text entered in textbox and display the images when validation fails using JQuery in asp.net.

Demo


Download sample code attached

 

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

6 comments :

Anonymous said...

You are really Excellent Sir! Almost everything is working fine. Only thing i need to know is how to disable back browser button of browser when user/client log-out from a web page.

Thank You
Mukund

Anonymous said...

How to customize this error message's location. I need to show the error messages in a div in my page. How can i specify the div's id in the example

Unknown said...

Hi ...Sir
i try this but it gives error ..
i am use master page... then how java script is use with master page and content page.

Unknown said...

how to use jquery with asp

anithadara said...

thanks a lot validation error message use full for me

Anonymous said...

Excellent Article.Thanks you so much.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.