Form validation Using JQuery

To do form validation using JQuery you can follow the following steps:

1.down load JQuery file from http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
   add this file to your project or refer the above link in master page
    < script src="Scripts/jquery-1.4.1.min.js" type="text/javascript" / >
2.write css file add this file your application.    

     < link href="CSS/Insitecss.css" rel="stylesheet" type="text/css" />;

3.write the bellow code in separate file and add this in master page
        < script src="Scripts/Test.js" type="text/javascript"/ >
   $(document).ready(function () {

   // key up function is used to validate the control data at the time of entering

    $(".onlynumbers").keyup(function (e) {
        this.value = this.value.replace(/[^0-9 ]/g, "")
    });
    $(".onlychars").keyup(function (e) {
        this.value = this.value.replace(/[^A-Z]/g, "");
    });

    var arrmessage = new Array();
    arrmessage[0] = "required field";
    arrmessage[1] = "Select";

    $('.btn-submit').click(function (e) {
       
      // get current form
        var $formid = $(this).parents('form');      
        var status = true;
        $('.required', $formid).each(function () {
            // validate the all mandatory fields
            var InputValue = $(this).val();
            if ($(this).hasClass('txtbox') == true) {
                if (InputValue == "" || InputValue == null || InputValue == "required field") {
                    $(this).val(arrmessage[0]);
                    $(this).addClass('error');
                    status = false;
                }
            }
        });

        if (!status) {
           // if any one of the mandatory field is not entered the page is not submitted to server 
            e.preventDefault();
        }
    });

    $(".required").focus(function () {
         // whereever user click on the mandatory field it clears the error messages 
        $(this).removeClass("error");
        var $val = $(this).val();
        if (jQuery.inArray($val, arrmessage) > -1) {
            $(this).val("");
        }
    });

});

4.give css classes to your web page controls as follows
5.asp.net page design as follows

&lttable&gt

            <tr>

              

                <td>

                   <asp:TextBox ID="TextBox1" runat="server" CssClass="required txtbox onlynumbers"></asp:TextBox>

                </td>

            </tr>

            <tr>

              

                <td>

                   <asp:TextBox ID="TextBox2" runat="server" CssClass="required txtbox onlychars"></asp:TextBox>

                </td>

            </tr>

            <tr>

                <td>

                     </td>

                <td>

                    <asp:Button ID="Button1" CssClass="btn-submit" runat="server" Text="Button"

                        onclick="Button1_Click" />

                </td>

            </tr>

           

        </table>

  check this code working fine.