IT-Stuffs

In our Asp.Net Client Side validation is most important and needed one. We can achive this using Jquery and when the user is focusing into the textbox control we need to highlight the controls. First we can add the aspx controls in the page using the following code in design view.

<div>
        <table style="border-color: Gray; border-width: thin;">
            <tr>
                <td colspan="2">
                    <div style="background-color: Silver" width="50%">
                        <span>Welcome My JQuery Test Application! </span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblUser" runat="server" Text="Enter User Name:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
                </td>
                <td>
                    <span id="errUser" style="visibility: hidden">!</span>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblPassword" runat="server" Text="Enter Password:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
                </td>
                <td>
                    <span id="errPassword" style="visibility: hidden">!</span>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblloc" runat="server" Text="Enter Location:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
                </td>
                <td>
                    <span id="Span1" style="visibility: hidden">!</span>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblEduLevel" runat="server" Text="Select Education Level:"></asp:Label>
                </td>
                <td>
                    <asp:DropDownList ID="ddlEduLevel" runat="server" Style="border-width:thin; border-color: #7F9DF9">
                        <asp:ListItem Text="SSLC" Value="0"></asp:ListItem>
                        <asp:ListItem Text="HSC" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Graduate" Value="2"></asp:ListItem>
                        <asp:ListItem Text="Post Graduate" Value="3"></asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                    <asp:DropDownList ID="ddlMajor" runat="server" Style="border-width:thin; border-color: #7F9DF9">
                    <asp:ListItem Value="0" Text="--Select--"></asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button ID="BtnSubmit" runat="server" Text="Go!" />
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <asp:Label ID="lblTestCopy" runat="server" Text="About your self:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtCopyToClipboard" runat="server" TextMode="MultiLine" Rows="5"
                        Width="300" Height="75"></asp:TextBox>
                </td>
                <td>
                    <asp:HyperLink ID="lnkHighlight" Text="Click here to copy!" runat="server"></asp:HyperLink>
                </td>
            </tr>
        </table>
    </div>

First we will validate the textbox controls using Jquery. Before that first load the JQuery Library using the bellow script.

<script src="JScript/jquery-1.6.1.js" type="text/javascript"></script>

 // To validating the User Name and Password text.
        $(document).ready(function () {
            $("#BtnSubmit").click(function () {
                var StrMsg = "";
                if ($("#txtUserName").val() == "") {
                    StrMsg = "User Name";
                }
                if ($("#txtPassword").val() == "")
                    StrMsg += StrMsg == "" ? "Password" : ", Password";
                if (StrMsg != "") {
                    alert(StrMsg + " Are Required!");
                    return false;
                }
                //return true;
            });
        });

Here the '$' is denoted the Jquery and the $(document).ready() is used to load the jquery before the DOM is loading.$("#txtUserName").val() is give the Textboxs value..
The Next thing is need to highlight the controls when we make focus to the control.

 //When focusing the Asp.Net control and highlight the Particular control 
        // And applay & Remove the CSS Class.
        $(document).ready(function () {
            $(":text").focusin(function () {
                $(this).addClass("Highlight");
            });
            $(":text").focusout(function () {
                $(this).removeClass("Highlight");
            });
            $(":password").focusin(function () {
                $(this).addClass("Highlight");
            });
            $(":password").focusout(function () {
                $(this).removeClass("Highlight");
            });
            $("select").focusin(function () {
                $(this).addClass("Highlight");
            });
            $("select").focusout(function () {
                $(this).removeClass("Highlight");
            });
        });

For this we need the CSS class name 'Highlight'.

 .Highlight{ background: #fed; border: 1px solid #7F9DF9;}
::selection{background: #0000FF;}