How to Validate ASP.NET Master Page Control Using JQuery


In these Tutorials we see how to perform validation on Asp.net Master Page Controls. Before go through this tutorial i'm strongly recommended you to read my previous tutorials : Validation on ASP.NET Controls using JQuery and another article is : How to validate Dropdownlist Item, if not selected from Dropdownlist

HTML MArkup : Add WebPage (MasterPage) in ASP.NET

<%@ Page Title="" Language="C#" MasterPageFile="~/JQUERY TUTORIALS/MasterPage.master" AutoEventWireup="true" CodeFile="JQuery-Demo-MasterPage-Validation.aspx.cs" Inherits="JQUERY_TUTORIALS_JQuery_Demo_MasterPage_Validation" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script src="JQuery%20Script/jquery-1.11.2.js" type="text/javascript"></script>

------------------ ADD JQUERY CODE HERE--------------------------------

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="div_error" id="error_display" align="left" style="color: #D8000C; background-color: #FFBABA; border:1px solid #D8000C; width:320px; padding:10px; display:none;" runat="server"><img style="margin-top:-3px; width:25px; height:25px; padding:0px 10px 0px 0px; float:left;" src="Warning.png" /><label id="lblerror" runat="server"></label></div><br />
    <asp:TextBox ID="t1" runat="server"></asp:TextBox><br />
    <asp:TextBox ID="t2" runat="server"></asp:TextBox><br />
    <asp:TextBox ID="t3" runat="server"></asp:TextBox><br />
    <br />
    <asp:Button ID="Button1" runat="server" Text="Submit"/>
</asp:Content>

JQuery Validation Code

<script type="text/javascript">
        $(document).ready(function () {
            $('[id$=Button1]').click(function () {                
                if ($('[id$=t1]').val() == "") {
                    $('[id$=error_display]').css("display", "block");
                    $('[id$=lblerror]').html("Please Enter TextBox 1");
                    $('[id$=t1]').css("border", "1px solid #FF0000");
                    $('[id$=t1]').focus(function () {
                        $('[id$=t1]').css("border", "1px solid #000000");
                        $('[id$=error_display]').css("display", "none");
                    });
                    return false;
                }
                if ($('[id$=t2]').val() == "") {
                    $('[id$=error_display]').css("display", "block");
                    $('[id$=lblerror]').html("Please Enter TextBox 2");
                    $('[id$=t2]').css("border", "1px solid #FF0000");
                    $('[id$=t2]').focus(function () {
                        $('[id$=t2]').css("border", "1px solid #000000");
                        $('[id$=error_display]').css("display", "none");
                    });
                    return false;
                }
                if ($('[id$=t3]').val() == "") {
                    $('[id$=error_display]').css("display", "block");
                    $('[id$=lblerror]').html("Please Enter TextBox 3");
                    $('[id$=t3]').css("border", "1px solid #FF0000");
                    $('[id$=t3]').focus(function () {
                        $('[id$=t3]').css("border", "1px solid #000000");
                        $('[id$=error_display]').css("display", "none");
                    });
                    return false;
                }

            });

        });
    </script>
0 Komentar untuk "How to Validate ASP.NET Master Page Control Using JQuery"

Back To Top