In these tutorials, we delve into the importance of data validation in ASP.NET applications, focusing on how to ensure that TextBox data doesn't allow empty values by leveraging the power of jQuery. Before delving into this tutorial, it's highly recommended to explore the following related topics:
- How to Validate Textbox Data doesn't allow empty value by using JQuery
- How to Show and Hide Div Tag based on RadiobuttonList Click Using JQuery
- How to Validate two Textbox values (Password and Confirm Password Comparion) by Using JQuery
HTML Markup: Create an Error Display Box
Before diving into the validation process, let's set up an error display box that will dynamically show error messages when the TextBox values are empty. This div tag is hidden by default but becomes visible with an appropriate error message when triggered.
<div 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>
HTML Markup: Create a Page with TextBoxes and a Button
Set up a sample ASP.NET page with five TextBoxes and a Button, creating the foundation for implementing the TextBox validation.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQueryExample1.aspx.cs" Inherits="JQUERY_TUTORIALS_JQueryExample1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="JQuery%20Script/jquery-1.11.2.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
--- ADD JQUERY CODE UNDER SCRIPT
</script>
</head>
<body>
<form id="form1" 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 />
<asp:TextBox ID="t4" runat="server"></asp:TextBox><br />
<asp:TextBox ID="t5" runat="server"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Hide" />
</form>
</body>
</html>
Implementing jQuery Code for TextBox Validation
Integrate jQuery into your ASP.NET page to enforce TextBox validation dynamically. The following jQuery script validates each TextBox, displaying an error message if any of them are left empty.
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').click(function () {
var t1 = $("#<%= t1.ClientID %>").val();
var t2 = $("#<%= t2.ClientID %>").val();
var t3 = $("#<%= t3.ClientID %>").val();
var t4 = $("#<%= t4.ClientID %>").val();
var t5 = $("#<%= t5.ClientID %>").val();
if (t1 == "") {
$('#error_display').css("display", "block");
$('#lblerror').html("Please Enter TextBox 1");
$('#t1').css("border", "1px solid #FF0000");
$('#t1').focus(function () {
$('#t1').css("border", "1px solid #000000");
$('#error_display').css("display", "none");
});
return false;
}
if (t2 == "") {
$('#error_display').css("display", "block");
$('#lblerror').html("Please Enter TextBox 2");
$('#t2').css("border", "1px solid #FF0000");
$('#t2').focus(function () {
$('#t2').css("border", "1px solid #000000");
$('#error_display').css("display", "none");
});
return false;
}
if (t3 == "") {
$('#error_display').css("display", "block");
$('#lblerror').html("Please Enter TextBox 3");
$('#t3').css("border", "1px solid #FF0000");
$('#t3').focus(function () {
$('#t3').css("border", "1px solid #000000");
$('#error_display').css("display", "none");
});
return false;
}
if (t4 == "") {
$('#error_display').css("display", "block");
$('#lblerror').html("Please Enter TextBox 4");
$('#t4').css("border", "1px solid #FF0000");
$('#t4').focus(function () {
$('#t4').css("border", "1px solid #000000");
$('#error_display').css("display", "none");
});
return false;
}
if (t5 == "") {
$('#error_display').css("display", "block");
$('#lblerror').html("Please Enter TextBox 3");
$('#t5').css("border", "1px solid #FF0000");
$('#t5').focus(function () {
$('#t5').css("border", "1px solid #000000");
$('#error_display').css("display", "none");
});
return false;
}
});
});
</script>
Implement this robust TextBox validation using jQuery to enhance the user experience by providing real-time feedback and ensuring data integrity in your ASP.NET applications.
0 Comments