Check Password Strength using Jquery, and check the User form Registration validation

Posted by senthil | 1:37:00 PM | , , | 1 comments »

check Password Strength using Jquery in asp.net:
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.


That’s all. Here’s the full jQuery code:

 
<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 &nbsp; as text for IE
                 label.html("&nbsp;").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">&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" 
            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>


 



download: click here to download the source code for jquery password strength indicator.



Out-put of the above code 














Read more ... 































Add  two Textbox values using JQuery



Posted by
senthil | 
        
12:28:00 PM

			| 
			
,


            | 
0
comments »
















A script that used to add two textbox values using jQuery:



This is the sample code for add two textbox values and display in one text box buy using jquery:








<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">

        $(function () {

            var textBox1 = $('input:text[id$=TextBox1]').keyup(foo);

            var textBox2 = $('input:text[id$=TextBox2]').keyup(foo);      

            function foo() {

                var value1 = textBox1.val();

                var value2 = textBox2.val();              

                var sum = add(value1, value2);

                $('input:text[id$=TextBox3]').val(sum);

            }

            function add() {

                var sum = 0;

                for (var i = 0, j = arguments.length; i < j; i++) {

                    if (IsNumeric(arguments[i])) {

                        sum += parseFloat(arguments[i]);

                    }

                }
                return sum;
            }
            function IsNumeric(input) {

                return (input - 0) == input && input.length > 0;
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
    <tr>
        <td>Butter</td>
        <td> <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox></td>
    </tr>
    <tr>
        <td>Cheese</td>
        <td> 
    <asp:TextBox runat="server" ID="TextBox2"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>Total</td>
        <td>
    <asp:TextBox runat="server" ID="TextBox3"></asp:TextBox>
        </td>
    </tr>
    </table> 
    </div>    </form>
</body>
</html>






Output:
















Read more ... 





























Subscribe to:
Posts (Atom)


















Related Posts Plugin for WordPress, Blogger...