Feb 02, 2021 02:10 AM|anjaliagarwal5@yahoo.com|LINK
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:CheckBoxID="chkExpShipping"Font-Bold="true"ForeColor="Red"CssClass="test"Text="ExpediteShipping"runat="server" /><asp:PanelID="pnlMessage"runat="server"Visible="false" ><divclass="ui-radio ui-btn"style="font-size:20px;"><spanstyle="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">
functionaddchange() {
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.
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.
Re: Javascript or Jquery validation on textChanged
Feb 02, 2021 11:11 AM|anjaliagarwal5@yahoo.com|LINK
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.
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:
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?
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.
Member
511 Points
1273 Posts
Javascript or Jquery validation on textChanged
Feb 02, 2021 02:10 AM|anjaliagarwal5@yahoo.com|LINK
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.
Member
330 Points
232 Posts
Re: Javascript or Jquery validation on textChanged
Feb 02, 2021 03:00 AM|SurferOnWww|LINK
Have you considered the CustomValidator? If yes why do you gave up yo use it and use your own validation?
Member
330 Points
232 Posts
Re: Javascript or Jquery validation on textChanged
Feb 02, 2021 03:53 AM|SurferOnWww|LINK
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) { // } } } }Member
511 Points
1273 Posts
Re: Javascript or Jquery validation on textChanged
Feb 02, 2021 11:11 AM|anjaliagarwal5@yahoo.com|LINK
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.
Member
330 Points
232 Posts
Re: Javascript or Jquery validation on textChanged
Feb 03, 2021 12:41 AM|SurferOnWww|LINK
Use addEventListener method, instead of onChange="addchange(), such like below:
window.onload = function () { document.getElementById('<%= txtAddress.ClientID%>'). addEventListener("change", addchange, false); }Member
511 Points
1273 Posts
Re: Javascript or Jquery validation on textChanged
Feb 03, 2021 11:30 PM|anjaliagarwal5@yahoo.com|LINK
The issue is my addchange does not seem to be working
Member
330 Points
232 Posts
Re: Javascript or Jquery validation on textChanged
Feb 03, 2021 11:52 PM|SurferOnWww|LINK
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?
Member
511 Points
1273 Posts
Re: Javascript or Jquery validation on textChanged
Feb 04, 2021 12:11 AM|anjaliagarwal5@yahoo.com|LINK
yes, the current issue is in the addChange method.
Member
330 Points
232 Posts
Re: Javascript or Jquery validation on textChanged
Feb 04, 2021 01:04 AM|SurferOnWww|LINK
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.