locked
Javascript or Jquery validation on textChanged RRS feed

  • Question

  • User351619809 posted

    I need to do the validation for the P.O box on text changed event. If the user types P.O Box in the address text box and also request for expedite shipping by checking a check box then I need to show the warning message to the user saying that expedite shipping cannot be done to the P.O box address. For this, I have the following code on my aspx page:

    <asp:TextBox ID="txtAddress" runat="server" style="text-transform:uppercase;" onChange="addchange();"  ></asp:TextBox>
    
    <asp:CheckBox  ID="chkExpShipping"  Font-Bold="true" ForeColor="Red"   CssClass="test" Text="ExpediteShipping" runat="server" />
    
        <asp:Panel ID="pnlMessage" runat="server" Visible="false" >
            <div  class="ui-radio ui-btn" style="font-size:20px;">
                <span style="color:blue"><b> Warning: Express delivery cannot be done to the P.O Box address</b>  </span>
            </div>
    
        </asp:Panel>
    

    if the user types P.O box address in the txtAddress and also checks the chkExpShipping check box then I want the pnlMessage to be visible and show the warning message. If the user changes the txtAddress content from P.O box to regular address then I want the warning to be hidden. In order to achieve this, I wrote this code:

    <script type="text/javascript">
            function addchange() {
                debugger;
                var add = document.getElementById('txtAddress').value;
                var postalRGEX = /^?i)\b(?:p(?:ost)?\.?\s*(?:[o0](?:ffice)?)?\.?\s*b(?:[o0]x)?|b[o0]x;
                var PostalResult = postalRGEX.test(add);
                if (PostalResult == true) {
                    document.getElementByID('<%=pnlMessage.ClientID%>').style.display = "block";
                }
                else {
                        document.getElementByID('<%=pnlMessage.ClientID%>').style.display = "none";
                }
    
                }
           
    
        </script>
    

    when I start typing in the txtAddress text box, no validation happens. The code does not even go the addChjange javascript function.

    any help with this will be appreciated.

    Tuesday, February 2, 2021 2:10 AM

All replies

  • User-1545767719 posted

    Have you considered the CustomValidator? If yes why do you gave up yo use it and use your own validation?

    Tuesday, February 2, 2021 3:00 AM
  • User-1545767719 posted

    I need to do the validation for the P.O box on text changed event. If the user types P.O Box in the address text box and also request for expedite shipping by checking a check box then I need to show the warning message to the user saying that expedite shipping cannot be done to the P.O box address.

    Use the CustomValidator if you can. Below is working sample. Note that I did not use your regular expression but verify only if user input is "PO Box" in the sample.

    <%@ Page Language="C#" AutoEventWireup="true" 
        CodeBehind="WebForm18.aspx.cs" 
        Inherits="WebApplication1.WebForm18" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script type="text/javascript">
            //<![CDATA[
            function TextBoxValidate(sender, args) {
                var cb = document.getElementById('<%= CheckBox1.ClientID%>');
                if (args.Value == "PO Box" && cb.checked) {
                    args.IsValid = false;
                } else {
                    args.IsValid = true;
                }
            }
            //]]>
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                Shipping Address:
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
                    runat="server" 
                    ErrorMessage="Shipping address is required." 
                    ControlToValidate="TextBox1" 
                    Display="Dynamic">
                </asp:RequiredFieldValidator>
                <asp:CustomValidator ID="CustomValidator1" 
                    runat="server" 
                    ErrorMessage="Expedite shipping not available for PO Box" 
                    ControlToValidate="TextBox1"
                    ClientValidationFunction="TextBoxValidate"
                    OnServerValidate="ServerValidate"
                    Display="Dynamic">
                </asp:CustomValidator>
                <br />
                Expedite Shipping:
                <asp:CheckBox ID="CheckBox1" runat="server" />
                <br />
                <asp:Button ID="Button1" runat="server" Text="Button" 
                    OnClick="Button1_Click" />
            </div>
        </form>
    </body>
    </html>
    using System;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebApplication1
    {
        public partial class WebForm18 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void ServerValidate(object source,  ServerValidateEventArgs args)
            {            
                if (TextBox1.Text == "PO Box" && CheckBox1.Checked)
                {                
                    args.IsValid = false;
                }
                else
                {
                    args.IsValid = true;
                }
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                if (Page.IsValid)
                {
                    // 
                }
            }
        }
    }

    Tuesday, February 2, 2021 3:53 AM
  • User351619809 posted

    I just want to display a warning message. If I use custom validator then I cannot proceed to next page unless user removes uncheck the expedite shipping box or change the PO box address.

    Tuesday, February 2, 2021 11:11 AM
  • User-1545767719 posted

    I just want to display a warning message. If I use custom validator then I cannot proceed to next page unless user removes uncheck the expedite shipping box or change the PO box address.

    Use addEventListener method, instead of onChange="addchange(), such like below:

    window.onload = function () {
        document.getElementById('<%= txtAddress.ClientID%>').
            addEventListener("change", addchange, false);
    }

    Wednesday, February 3, 2021 12:41 AM
  • User351619809 posted

    The issue is my addchange does not seem to be working

    Wednesday, February 3, 2021 11:30 PM
  • User-1545767719 posted

    The issue is my addchange does not seem to be working

    You said in the first post "The code does not even go the addChjange javascript function." It is OK now? Do you mean that the current issue is in the addchange method?

    Wednesday, February 3, 2021 11:52 PM
  • User351619809 posted

    yes, the current issue is in the addChange method.

    Thursday, February 4, 2021 12:11 AM
  • User-1545767719 posted

    yes, the current issue is in the addChange method.

    You have to remove Visible="false" from the Panel ID="pnlMessage". If you put Visible="false" the Panel (div element in html) and all the elements inside the Panel will never be rendered in the html source. Therefore, there is no way for the JavaScript to apply display: block and display: none to the Panel.

    Thursday, February 4, 2021 1:04 AM