Introduction:
In this article I will explain how to display images whenever validation fails in form using JQuery and I will explain how to show 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.
Download sample code attached
In this article I will explain how to display images whenever validation fails in form using JQuery and I will explain how to show 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.
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 as text for IE
label.html(" ").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"> </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
No comments :
Post a Comment