Introduction:
In this article, I tried to explain how to perform jQuery validation on Master Page controls in Asp.Net. Before continuing with this article I strongly recommend you check one of my previous articles which is also a similar concept performing validation on dropdown lists using jQuery.
The image shows a preview of the project which I'm going to demonstrate in this article.
HTML Markup:
In my HTML markup code, I'm not showing any master page code because I'm not adding any controls directly to the master page. Let's design according to the requirements of the above image.
- First, we need to add a div tag, and by default, this div tag is hidden. The id should be error_display, and it will show an error message when an error triggers, as shown in the above image.
- Second, we need to add three textbox controls whose id's are t1, t2, t3
- Third, add button control and change id to btnSubmit and text to Submit
<%@ 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
jQuery validation will execute when the end user clicks on the button. It checks whether the textbox control is null or empty. If any textbox control is null or empty, it will show an appropriate error message using the div tag id, i.e., error_display, and also highlight the textbox with red borders, as shown in the above image.
<script type="text/javascript">
$(document).ready(function () {
$('[id$=btnSubmit]').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>
Conclusion:
In this tutorial, I tried my best to explain to you how to perform jQuery validation on server-side control in the asp.net master page. I hope I shared valuable information in the form of an article on jQuery validation.
0 Comments