ASP.NET TextBox Validation Using JQuery


In these Tutorials we see How to Validate Textbox Data doesn't allow empty value by using JQuery. Before go through this tutorial i'm strongly recommended you to read my previous tutorials : How to Validate two Textbox values (Password and Confirm Password Comparion) by Using JQuery and another article is How to Show and Hide Div Tag based on RadiobuttonList Click Using JQuery.

HTML Markup : Create Error Display Box


These Div tag is used to display error message when Textbox is blank, but by default Div Tag is Hidden when textbox is empty div tag is show with appropriate error message.

<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><br />

HTML Markup : Create Page With 5 TextBox and One Button as Show Above

<%@ 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>

Add JQuery Code in Above HTML Page

<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> 
0 Komentar untuk " ASP.NET TextBox Validation Using JQuery"

Back To Top