Xem ti vi online

Design by Blogcrowds

Sunday, March 1, 2015

Username Availability Check in ASP.NET Web Forms with jQuery Validation Plugin

0 comments Posted by Duc Nguyen at 6:58 PM

<form id="form1" runat="server">
       <fieldset>
           <legend>Register</legend>
           <p>                 
               <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label>
               <asp:TextBox ID="UserName" runat="server" ClientIDMode="Static"></asp:TextBox>             
           </p>
           <p>
               <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
               <asp:TextBox ID="Password" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox>
 
           </p>
           <p>
               <asp:Label ID="ConfirmPasswordLabel" runat="server" AssociatedControlID="ConfirmPassword">Confirm Password:</asp:Label>
               <asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox>
 
           </p>
           <p>
               <asp:Button ID="Button" runat="server" Text="Sign Up" />
           </p>
       </fieldset>
   </form>
 
The form has username, password and confirm password fields. I am using ClientIDMode=”Static” for all textboxes so that I could use same name in jQuery.

CSS:

<style type="text/css">
       label
       {           
           display:block;
       }
       input.error
       {
           border: solid 2px #CC0000;
       }
 
       input.valid
       {
           border: solid 2px green;
       }
       span
       {
            margin-left:5px;
       }
       span.valid
       {
           width:16px;
           height:16px;
           color: green;
           background:url("http://cdn1.iconfinder.com/data/icons/basicset/tick_16.png") left center no-repeat;
           display:inline-block;
           
       }
       span.error
       {         
           width: 100%;
           color: red;
       }
   </style>
 

jQuery Validation:

For simplicity, I am using jquery validation plugin from cdn.
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script>
 
To call server side method using ajax, we use Remote function of jQuery validation plugin

$("#<%=form1.ClientID%>").validate({
               errorElement: 'span',               
               rules: {
                   UserName: {
                       required: true,
                       remote: function () {
                           return {
                               url: "/Default.aspx/IsUserNameAvailable",
                               type: "POST",
                               contentType: "application/json; charset=utf-8",
                               dataType: "json",
                               data: JSON.stringify({ userName: $('#UserName').val() }),
                               dataFilter: function (data) {
                                   var msg = JSON.parse(data);
                                   if (msg.hasOwnProperty('d'))
                                       return msg.d;
                                   else
                                       return msg;
                               }
                           }
                       },
                   },
                   Password: {
                       required: true,
                       minlength: 8,
                   },
                   ConfirmPassword: {
                       required: true,
                       minlength: 8,
                       equalTo: "#Password"
                   }
               },
               messages: {
                   UserName: {
                       required: "User name is Required",
                       remote: "This user name is already in use",
                   },
                   Password: {
                       required: "Password is Required",
                       minlength: "Password requires at least 8 characters",
                   },
                   ConfirmPassword: {
                       required: "Confirm password is Required",
                       minlength: "Confirm password requires at least 8 characters",
                       equalTo: "Confirm password must match the Password",
                   }
               },
               onkeyup:false,
               onblur: true,
               onfocusout: function (element) { $(element).valid() }
 
                
 
           });
To add green check for valid fields:
highlight: function (element, errorClass, validClass) {
    $(element).parent().find('span').remove();
    $(element).addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass) {
    $(element).removeClass(errorClass);
},
success: function (label) {
    var $label = $(label);
    $(label).nextAll().remove();
    if (!$label.hasClass('valid')) {
        $label.addClass('valid');
    }
    $label.removeClass('error');                   
}        
 
 

Labels: , ,

Subscribe to: Comments (Atom)