Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Jquery Form Validation in Asp.Net

    @mayank.srivastava
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 419
    Comment on it

    Jquery Form Validation in Asp.Net:

        For form validation first we have to design a form in HTML.

    Example:

    1. <form id="form1" runat="server">
    2. <table border="0" cellpadding="0" cellspacing="0">
    3.     <tr>
    4.         <td>
    5.         </td>
    6.         <td>
    7.             Please fill the following Form
    8.         </td>
    9.     </tr>
    10.     <tr>
    11.         <td style="height: 40px">
    12.         </td>
    13.     </tr>
    14.     <tr>
    15.         <td>
    16.             Name:
    17.         </td>
    18.         <td>
    19.             <asp:TextBox ID="txtName" runat="server" />
    20.         </td>
    21.     </tr>
    22.     <tr>
    23.         <td style="height: 40px">
    24.         </td>
    25.     </tr>
    26.     <tr>
    27.         <td>
    28.             Email:
    29.         </td>
    30.         <td>
    31.             <asp:TextBox ID="txtEmail" runat="server" />
    32.         </td>
    33.     </tr>
    34.     <tr>
    35.         <td style="height: 40px">
    36.         </td>
    37.     </tr>
    38.     <tr>
    39.         <td>
    40.             City:
    41.         </td>
    42.         <td>
    43.             <asp:DropDownList ID="ddlCities" runat="server">
    44.                 <asp:ListItem Text="Please Select" Value="" />
    45.                 <asp:ListItem Text="Mumbai" Value="1" />
    46.                 <asp:ListItem Text="Delhi" Value="2" />
    47.                 <asp:ListItem Text="Kolkatta" Value="3" />
    48.                 <asp:ListItem Text="Chennai" Value="4" />
    49.             </asp:DropDownList>
    50.         </td>
    51.     </tr>
    52.     <tr>
    53.         <td style="height: 40px">
    54.         </td>
    55.     </tr>
    56.     <tr>
    57.         <td>
    58.             Password:
    59.         </td>
    60.         <td>
    61.             <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"/>
    62.         </td>
    63.     </tr>
    64.     <tr>
    65.         <td style="height: 40px">
    66.         </td>
    67.     </tr>
    68.     <tr>
    69.         <td>
    70.             Confirm Password:
    71.         </td>
    72.         <td>
    73.             <asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server"/>
    74.         </td>
    75.     </tr>
    76.     <tr>
    77.         <td style="height: 40px">
    78.         </td>
    79.     </tr>
    80.     <tr>
    81.         <td>
    82.             Mobile Phone Number:
    83.         </td>
    84.         <td>
    85.             <asp:TextBox ID="txtPhoneNumber" runat="server"/>
    86.         </td>
    87.     </tr>
    88.     <tr>
    89.         <td style="height: 40px">
    90.         </td>
    91.     </tr>
    92.     <tr>
    93.         <td>
    94.             Birth Date (dd/MM/yyyy):
    95.         </td>
    96.         <td>
    97.             <asp:TextBox ID="txtBirthDate" runat="server"/>
    98.         </td>
    99.     </tr>
    100.     <tr>
    101.         <td style="height: 40px">
    102.         </td>
    103.     </tr>
    104.     <tr>
    105.         <td>
    106.         </td>
    107.         <td>
    108.             <asp:Button Text="Submit" runat="server" />
    109.         </td>
    110.     </tr>
    111. </table>
    112. </form>

      Now add the following js file containing the scripts and the JavaScript code, in your project, In this example we are making use of the jQuery ValidationEngine plugin.

    1. <link href="ValidationEngine.css" rel="stylesheet" type="text/css" />
    2.  
    3. <script type="text/javascript" 
    4.  
    5. src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    6.  
    7. <script type="text/javascript" 
    8.  
    9. src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"
    10.     charset="utf-8"></script>
    11.  
    12. <script type="text/javascript" 
    13.  
    14. src="http://cdn.ucb.org.br/Scripts/formValidator/js/jquery.validationEngine.js"
    15.     charset="utf-8"></script>
    16.  
    17. <script type="text/javascript">
    18.     $(function () {
    19.         $("#form1").validationEngine('attach', { promptPosition: "topRight" });
    20.     });
    21.     function DateFormat(field, rules, i, options) {
    22.         var regex = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
    23.         if (!regex.test(field.val())) {
    24.             return "Please enter date in dd/MM/yyyy format."
    25.         }
    26.     }
    27. </script>

      For validating the controls we just need to add the CssClass="validate[required]" to it.

    Example:

    1. <asp:TextBox ID="txtEmail" runat="server" CssClass="validate[required,custom[email]]" />

      For comparing the value of two fields such as comparing passwords we can use CssClass="validate[equals[id of the field to be compared]]"

    Example: Comparing Passwords-

    1. <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="validate[required]" />
    2. <asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server" CssClass="validate
    3. [required,equals[txtPassword]]" />

      For Number validation i.e. the input data is only integer we can use CssClass="validate [custom[integer]]"

      For minimum & maximum length of the input data we can use CssClass="validate[maxSize [range],minSize[range]]"

    Example:

    1. <asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="validate[required,custom
    2. [integer],maxSize[10],minSize[10]]" />

    Calling custom functions along with the Jquery Validation:

    We can see the following script in the js file:

    1. <script type="text/javascript">
    2.     $(function () {
    3.         $("#form1").validationEngine('attach', { promptPosition: "topRight" });
    4.     });
    5.     function DateFormat(field, rules, i, options) {
    6.         var regex = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
    7.         if (!regex.test(field.val())) {
    8.             return "Please enter date in dd/MM/yyyy format."
    9.         }
    10.     }
    11. </script>

      This is a custom function written to validate the date.
      The following example explains how to use this function along with the validate class.

    Example:

    1. <asp:TextBox ID="txtBirthDate" runat="server" CssClass="validate[required,funcCall[DateFormat[]]" />

    Sample form with complete Jquery validation :

    1. <form id="form1" runat="server">
    2. <table border="0" cellpadding="0" cellspacing="0">
    3.     <tr>
    4.         <td>
    5.         </td>
    6.         <td>
    7.             Please fill the following Form
    8.         </td>
    9.     </tr>
    10.     <tr>
    11.         <td style="height: 40px">
    12.         </td>
    13.     </tr>
    14.     <tr>
    15.         <td>
    16.             Name:
    17.         </td>
    18.         <td>
    19.             <asp:TextBox ID="txtName" runat="server" CssClass="validate[required]" />
    20.         </td>
    21.     </tr>
    22.     <tr>
    23.         <td style="height: 40px">
    24.         </td>
    25.     </tr>
    26.     <tr>
    27.         <td>
    28.             Email:
    29.         </td>
    30.         <td>
    31.             <asp:TextBox ID="txtEmail" runat="server" CssClass="validate[required,custom[email]]" />
    32.         </td>
    33.     </tr>
    34.     <tr>
    35.         <td style="height: 40px">
    36.         </td>
    37.     </tr>
    38.     <tr>
    39.         <td>
    40.             City:
    41.         </td>
    42.         <td>
    43.             <asp:DropDownList ID="ddlCities" runat="server" CssClass="validate[required]">
    44.                 <asp:ListItem Text="Please Select" Value="" />
    45.                 <asp:ListItem Text="Mumbai" Value="1" />
    46.                 <asp:ListItem Text="Delhi" Value="2" />
    47.                 <asp:ListItem Text="Kolkatta" Value="3" />
    48.                 <asp:ListItem Text="Chennai" Value="4" />
    49.             </asp:DropDownList>
    50.         </td>
    51.     </tr>
    52.     <tr>
    53.         <td style="height: 40px">
    54.         </td>
    55.     </tr>
    56.     <tr>
    57.         <td>
    58.             Password:
    59.         </td>
    60.         <td>
    61.             <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="validate[required]" />
    62.         </td>
    63.     </tr>
    64.     <tr>
    65.         <td style="height: 40px">
    66.         </td>
    67.     </tr>
    68.     <tr>
    69.         <td>
    70.             Confirm Password:
    71.         </td>
    72.         <td>
    73.             <asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server" CssClass="validate[required,equals[txtPassword]]" />
    74.         </td>
    75.     </tr>
    76.     <tr>
    77.         <td style="height: 40px">
    78.         </td>
    79.     </tr>
    80.     <tr>
    81.         <td>
    82.             Mobile Phone Number:
    83.         </td>
    84.         <td>
    85.             <asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="validate[required,custom[integer],maxSize[10],minSize[10]]" />
    86.         </td>
    87.     </tr>
    88.     <tr>
    89.         <td style="height: 40px">
    90.         </td>
    91.     </tr>
    92.     <tr>
    93.         <td>
    94.             Birth Date (dd/MM/yyyy):
    95.         </td>
    96.         <td>
    97.             <asp:TextBox ID="txtBirthDate" runat="server" CssClass="validate[required,funcCall[DateFormat[]] " />
    98.         </td>
    99.     </tr>
    100.     <tr>
    101.         <td style="height: 40px">
    102.         </td>
    103.     </tr>
    104.     <tr>
    105.         <td>
    106.         </td>
    107.         <td>
    108.             <asp:Button Text="Submit" runat="server" />
    109.         </td>
    110.     </tr>
    111. </table>
    112. </form>
    Jquery validation in .Net Jquery validation Form Validation
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: