ASP.NET + JavaScript + Client Side Code With Custom Validator Not Working Right
ASP.NET + JavaScript + Client Side CustomValidators - I Have Question
I have a ASP.Net standard Web Form working on validation - www.enflow.com/CC/P1/EE.aspx
Click The Other Button and a text box will appear... do not put any text into that textbox
Now Click Submit Button and you will CORRECTLY get a Validation Summary Msg saying missing text for the Describe Other textbox
But if you put text into that textbox and click submit button again then you will keep getting the same validation error...
I think i am missing something simple in JScript ClientSide Validation Call or ??
Here is JScript for Client JS Call...
I have a ASP.Net standard Web Form working on validation - www.enflow.com/CC/P1/EE.aspx
Click The Other Button and a text box will appear... do not put any text into that textbox
Now Click Submit Button and you will CORRECTLY get a Validation Summary Msg saying missing text for the Describe Other textbox
But if you put text into that textbox and click submit button again then you will keep getting the same validation error...
I think i am missing something simple in JScript ClientSide Validation Call or ??
Here is JScript for Client JS Call...
function valOther(sender, args) {
if (document.getElementById("<%=Other.ClientID %>").checked == true) {
if (document.getElementById("<%=MoreOther.ClientID %>").value === null) {
args.IsValid = true;
} else {
args.IsValid = false;
}
}
}<%@ Page Language="VB" AutoEventWireup="false" Debug="true" MaintainScrollPositionOnPostback="true" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Web.UI.Page" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.data.OleDb" %>
<%@ Import Namespace="System.Web.UI.WebControls" %>
<%@ Register Assembly="System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" Namespace="System.Web.UI.WebControls" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Public Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Page.EnableViewState = True
'If IsPostBack = True Then
'Response.Write("OK")
'Exit Sub
'End If
End Sub
Protected Sub SubmitME_Click(ByVal sender As Object, ByVal e As EventArgs) 'Send Data To DBase
'a
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<title>CC Housing Assistance Application: Part One - Page 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en" />
<meta name="robots" content="noindex, nofollow" />
<!-- <link rel="StyleSheet" href="/authority.css" media="all" />-->
<style type="text/css">
.container {
width: 1040px;
margin: auto;
border: 10px solid #003366;
background-color: #FFFFFF;
}
.inner {
/*border: 1px solid #003366;*/
width: 1000px;
margin: auto;
}
.divTable {
display: table;
width: 100%
}
.divTableRow {
display: table-row;
width: 100%
}
.div_1Pix {
border: 1px solid #003366;
text-align: center;
height: 1px;
width: 100%;
}
.div_5Pix, .div_10Pix {
text-align: left;
height: 5px;
width: 100%;
font-size: large;
}
.divTableCellTwo_12Pct {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
width: 12%;
height: 35px;
vertical-align: middle;
line-height: 35px;
}
.divTableCellTwo_12Pct_PAD {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
width: 12%;
height: 35px;
vertical-align: middle;
line-height: 35px;
padding: 3px;
}
.divTableCellTwo_12Pct_HT60 {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
width: 12%;
height: 60px;
vertical-align: middle;
line-height: 60px;
}
.div_15Pix {
text-align: left;
height: 15px;
width: 100%;
font-size: large;
}
.divTableCellTwo_16Pct {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
width: 16%;
height: 35px;
vertical-align: middle;
line-height: 35px;
text-indent: 8px;
}
.divTableCellTwo_18Pct {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
width: 18%;
height: 35px;
vertical-align: middle;
line-height: 35px;
text-indent: 8px;
}
.div_20Pix {
text-align: left;
font-size: large;
height: 20px;
width: 100%;
}
.div_20Pix_GreenSection {
border: 1px solid #003366;
text-align: center;
line-height: 20px;
vertical-align: middle;
font-size: large;
height: 20px;
width: 100%;
background-color: #E8FFE8;
}
.div_20Pix_ULine {
text-align: left;
font-size: large;
height: 20px;
width: 100%;
text-decoration: underline;
}
.div_20Pix_Indent20Pix {
text-align: left;
font-size: large;
height: 20px;
width: 100%;
text-indent: 20px;
}
.divTableCellTwo_20Pct {
display: table-cell;
/*border: 1px solid #003366;*/
line-height: 35px;
text-align: left;
font-size: large;
width: 20%;
height: 35px;
vertical-align: middle;
}
.divTableCell_CB {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
vertical-align: middle;
line-height: 26px;
width: 25%;
height: 26px;
padding: 3px;
}
.divTableCellTwo_25Pct {
display: table-cell;
line-height: 35px;
text-align: left;
font-size: large;
width: 25%;
height: 35px;
vertical-align: top;
}
.divTableCellTwo_25Pct_HT15 {
display: table-cell;
line-height: 15px;
text-align: left;
font-size: medium;
width: 25%;
height: 15px;
vertical-align: top;
text-indent: 5px;
}
.div_30Pix_Bottom {
text-align: left;
height: 30px;
font-size: large;
line-height: 30px;
width: 100%;
vertical-align: baseline
}
.div_30Pix {
/*border: 1px solid #003366;*/
text-align: center;
vertical-align: middle;
line-height: 30px;
font-size: large;
height: 30px;
width: 100%;
}
.div_30Pix_Section {
border: 1px solid #003366;
text-align: center;
line-height: 30px;
vertical-align: middle;
font-size: x-large;
font-weight: bold;
background-color: #FFFFCC;
height: 30px;
width: 100%;
}
.divTableCellTwo_30Pct {
display: table-cell;
/*border: 1px solid #003366;*/
line-height: 35px;
text-align: left;
font-size: large;
width: 30%;
height: 35px;
vertical-align: middle;
}
.divTableCellTwo_32Pct {
display: table-cell;
/*border: 1px solid #003366;*/
line-height: 35px;
text-align: left;
font-size: large;
width: 32%;
height: 35px;
vertical-align: middle;
}
.divTableCellTwo_33Pct_15HT {
display: table-cell;
/*border: 1px solid #003366;*/
line-height: 15px;
text-align: left;
font-size: Medium;
width: 33%;
height: 15px;
vertical-align: middle;
text-indent: 3px;
}
.divTableCellTwo_33Pct {
display: table-cell;
/*border: 1px solid #003366;*/
line-height: 35px;
text-align: left;
font-size: large;
width: 33%;
height: 35px;
vertical-align: middle;
}
.div_35Pix_MiddleVA {
text-align: center;
height: 35px;
width: 100%;
vertical-align: middle;
font-size: large;
line-height: 35px;
}
.div_35Pix_MiddleVA_EL {
text-align: center;
height: 35px;
width: 100%;
vertical-align: middle;
font-size: xx-large;
line-height: 35px;
}
.div_35Px {
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
vertical-align: middle;
line-height: 35px;
width: 100%;
height: 35px;
}
.divTableCellTwo_15Pct {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
vertical-align: middle;
line-height: 35px;
width: 15%;
height: 35px;
}
.divTableCellTwo_35Pct {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
vertical-align: middle;
line-height: 35px;
width: 35%;
height: 35px;
}
.divTableCellTwo_38Pct {
display: table-cell;
/*border: 1px solid #003366;*/
line-height: 35px;
text-align: left;
font-size: large;
width: 38%;
height: 35px;
vertical-align: middle;
}
.div_40Pix {
text-align: left;
height: 40px;
width: 100%;
font-weight: bold;
font-size: large;
/*border: 1px solid #003366;*/
}
.div_45Pix {
text-align: left;
height: 45px;
width: 100%;
font-size: large;
}
.div_50Pix {
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
height: 50px;
width: 100%;
}
.divTableCellTwo_50Pct {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
vertical-align: middle;
line-height: 35px;
width: 50%;
height: 35px;
}
.divTableCellTwo_Image40 {
display: table-cell;
/*border: .05px solid #D3D3D3;*/
line-height: 100px;
text-align: center;
vertical-align: middle;
width: 35%;
height: 100px;
}
.divTableCellTwo_Image60 {
display: table-cell;
/*border: .05px solid #D3D3D3;*/
line-height: 100px;
text-align: center;
vertical-align: middle;
width: 65%;
height: 100px;
}
.div_60Pix {
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
font-weight: bold;
height: 60px;
width: 100%;
background-color: #FFFFCC;
}
.div_60Pix {
/*border: 1px solid #003366;*/
text-align: center;
height: 60px;
line-height: 60px;
vertical-align: middle;
width: 100%;
font-size: medium;
font-weight: bold;
}
.div_60Pix_LEFT {
/*border: 1px solid #003366;*/
text-align: left;
height: 60px;
line-height: 60px;
vertical-align: middle;
width: 100%;
font-size: large;
word-wrap: normal;
}
.divTableCellTwo_65Pct {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
vertical-align: middle;
line-height: 35px;
width: 65%;
height: 35px;
}
.divTableCellTwo_75Pct {
display: table-cell;
text-align: left;
font-size: large;
vertical-align: middle;
line-height: 35px;
width: 75%;
height: 35px;
}
.div_85Pix {
/*border: 1px solid #003366;*/
text-align: left;
height: 85px;
vertical-align: top;
width: 100%;
font-size: large;
}
.divTableCellTwo_88Pct {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
vertical-align: middle;
width: 88%;
height: 35px;
}
.divTableCellTwo_88Pct_HT60 {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
vertical-align: middle;
line-height: 60px;
width: 88%;
height: 60px;
}
.divTableCell_100Pct_SM {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
font-size: large;
vertical-align: middle;
line-height: 35px;
width: 100%;
height: 35px;
}
.divTableCell_100Pct {
display: table-cell;
/*border: 1px solid #003366;*/
text-align: left;
vertical-align: middle;
line-height: 200px;
width: 100%;
height: 200px;
}
.p {
display: block;
margin-left: 0;
margin-right: 0;
text-align: left;
width: 100%;
font-size: large;
}
.p_ULine {
display: block;
/*margin-top: 1em;
margin-bottom: 1em;*/
margin-left: 0;
margin-right: 0;
text-align: left;
width: 100%;
font-size: large;
text-decoration: underline;
}
.ul_large {
font-size: large;
}
.adultblock {
display: none;
}
#HideA2, #HideA3, #HideA4 {
}
.childblock {
display: none;
}
#HideC2, #HideC3, #HideC4, #HideC5, #HideC6 {
}
#AgencyGRP {
display: block;
}
#CR, #CS, #MO, #RH, #PB {
display: none;
}
#reqNowHomeLess, #NowHomeLess {
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function ShowHide(rbl) {
//Get the selected value from radiobuttonlist
var selectedvalue = $("#" + rbl.id + " input:radio:checked").val();
if (selectedvalue == "Y") {
//if so then
AgencyGRP.style.display = "block";
RH.style.display = "none";
}
else {
//if not then
AgencyGRP.style.display = "none";
RH.style.display = "block";
}
}
function checkOther() {
if (document.getElementById('Other').checked) {
MO.style.display = "block";
} else {
MO.style.display = "none";
}
}
function valOther(sender, args) {
if (document.getElementById("<%=Other.ClientID %>").checked == true) {
if (document.getElementById("<%=MoreOther.ClientID %>").value === null) {
args.IsValid = true;
} else {
args.IsValid = false;
}
}
}
function valHomeless(oSrc, args) {
var rbtnValue = null;
var rbtnList = document.getElementsByName('<%= NowHomeLess.ClientID %>');
var radio = rbtnList[0].getElementsByTagName("input");
for (var j = 0; j < radio.length; j++) {
if (radio[j].checked)
rbtnValue = radio[j].value;
alert(rbtnValue);
}
if (rbtnValue == 'Y') {
args.IsValid = !(args.Value == "")
} else {
args.IsValid = true;
}
}
</script>
<script type="text/javascript">
</script>
</head>
<body bgcolor="#F2F2F2">
<div class="container">
<form id="frmPartOne" runat="server">
<asp:ValidationSummary ID="valSum" runat="server" />
<div class="div_20Pix_GreenSection"><strong>PRIORITY SCREENING QUESTIONS</strong></div>
<div class="div_10Pix"></div>
<div class="divTable">
<div class="divTableRow">
<div class="divTableCellTwo_50Pct">Are you homeless?*
<asp:RequiredFieldValidator id="reqNowHomeLess" controltovalidate="NowHomeLess" runat="server" forecolor="Red" Text="*" Display="Dynamic" errormessage="MISSING - Are You Homeless - IN SECTION TWO - Under Priority Screening Questions - Select Yes or No" />
</div>
<div class="divTableCellTwo_50Pct">
<asp:RadioButtonList ID="NowHomeLess" TabIndex="27" runat="server" onclick="ShowHide(this);" RepeatDirection="Horizontal" TextAlign="Left">
<asp:ListItem Text="Yes" Value="Y"/><asp:ListItem Text="No" Value="N"/></asp:RadioButtonList>
</div>
</div>
</div>
<div id="RH">
<div class="divTable">
<div class="divTableRow">
<div class="divTableCellTwo_50Pct">If not homeless, are you at serious risk of homelessness?*
</div>
<div class="divTableCellTwo_50Pct">
<asp:RadioButtonList ID="RiskHomeLess" TabIndex="28" runat="server" RepeatDirection="Horizontal" TextAlign="Left">
<asp:ListItem Text="Yes" Value="Y"/><asp:ListItem Text="No" Value="N"/></asp:RadioButtonList>
<asp:CustomValidator ID="cusRiskHomeLess" runat="server" ControlToValidate="RiskHomeLess" ClientValidationFunction="valHomeless" display="Dynamic" ErrorMessage="MISSING - Risk Of Homelessness Choice - Select Yes or No - IN SECTION TWO - Under Priority Screening Questioins Area"></asp:CustomValidator>
</div>
</div>
</div>
</div>
<div class="divTable">
<div class="divTableRow">
<div class="divTableCellTwo_50Pct">Are you seeking housing in Tacoma?*
<asp:RequiredFieldValidator id="reqHousingTacoma" controltovalidate="HousingTacoma" runat="server" forecolor="Red" Text="*" Display="Dynamic" errormessage="MISSING - Are You Seeking Housing In Tacoma -- SECTION TWO -- Under Priority Screening Questions - Select Yes or No" />
</div>
<div class="divTableCellTwo_50Pct">
<asp:RadioButtonList ID="HousingTacoma" TabIndex="29" runat="server" RepeatDirection="Horizontal" TextAlign="Left">
<asp:ListItem Text="Yes" Value="Y"/><asp:ListItem Text="No" Value="N"/></asp:RadioButtonList>
</div>
</div>
</div>
<div class="div_10Pix"></div>
<span class="p_ULine"><strong>Reason for homelessness or risk of homelessness (Check All That Apply)...</strong></span>
<div class="div_10Pix"></div>
<div class="divTable">
<div class="divTableRow">
<div class="divTableCell_100Pct_SM" style="padding: 3px">
<asp:CheckBox ID="Other" runat="server" Text="Other" onClick="checkOther()" ToolTip="Check If True" TabIndex="45"/>...
</div>
</div>
</div>
<div id="MO">
<div style="font-size: 18px; text-indent: 120px;">You Checked Other - Describe that in Textbox below (Note 500 MAX characters allowed)<strong> -- **Required Field**</strong></div>
<div class="div_10Pix"></div>
<div class="divTable">
<div class="divTableRow">
<div class="divTableCellTwo_12Pct_HT60">Describe Other:</div>
<div class="divTableCellTwo_88Pct_HT60">
<asp:TextBox ID="MoreOther" runat="server" Height="53px" Width="853px" BackColor="#EAF4FF" Font-Size="Large" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" TabIndex="45" TextMode="MultiLine" onKeyUp="javascript:Count(this,500);" onChange="javascript:Count(this,500);" ToolTip="If you checked Other than explain here what that means for you" MaxLength="500"></asp:TextBox>
<asp:CustomValidator ID="reqMoreOther" runat="server" display="none" ControlToValidate ="MoreOther" ValidateEmptyText="true" ErrorMessage="MISSING - Enter Descibe Other Text Info - IN SECTION TWO Under Priority Screen Questions" ClientValidationFunction="valOther"></asp:CustomValidator>
</div>
</div>
</div>
<div class="div_15Pix"></div>
</div>
<div id="AgencyGRP">
<p class="p"><strong>You are identifying that you are homeless and you will need to provide information about which Agencies you are currently working with to resolve your homelessness. Without this information, you will be identified as almost homeless.</strong></p>
<div class="divTable">
<div class="divTableRow">
<div class="divTableCellTwo_33Pct_15HT">Agency One Name*</div>
<div class="divTableCellTwo_33Pct_15HT">Agency One Phone*</div>
<div class="divTableCellTwo_33Pct_15HT">Agency One Contact Name (If Available) </div>
</div>
<div class="divTableRow">
<div class="divTableCellTwo_33Pct">
<asp:TextBox ID="AgencyName_1" runat="server" Height="25px" Width="320px" Wrap="False" BackColor="#EAF4FF" Font-Size="Large" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" MaxLength="150" ToolTip="Enter Agency One Name Here" TabIndex="47"></asp:TextBox>
</div>
<div class="divTableCellTwo_33Pct">
<asp:TextBox ID="AgencyPhone_1" runat="server" Height="25px" Width="320px" Wrap="False" BackColor="#EAF4FF" Font-Size="Large" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" Placeholder="...Phone Format: (222) 444-7777" MaxLength="50" ToolTip="Enter Agency One Phone # Here" TabIndex="48"></asp:TextBox>
</div>
<div class="divTableCellTwo_33Pct">
<asp:TextBox ID="AgencyContact_1" runat="server" Height="25px" Width="320px" Wrap="False" BackColor="#EAF4FF" Font-Size="Large" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" MaxLength="100" ToolTip="Enter Agency One Contact Name Here" TabIndex="49"></asp:TextBox>
</div>
</div>
<div class="divTableRow">
<div class="divTableCellTwo_33Pct_15HT">Agency Two Name</div>
<div class="divTableCellTwo_33Pct_15HT">Agency Two Phone</div>
<div class="divTableCellTwo_33Pct_15HT">Agency Two Contact Name (If Available) </div>
</div>
<div class="divTableRow">
<div class="divTableCellTwo_33Pct">
<asp:TextBox ID="AgencyName_2" runat="server" Height="25px" Width="320px" Wrap="False" BackColor="#EAF4FF" Font-Size="Large" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" MaxLength="150" ToolTip="Enter Agency Two Name Here" TabIndex="50"></asp:TextBox>
</div>
<div class="divTableCellTwo_33Pct">
<asp:TextBox ID="AgencyPhone_2" runat="server" Height="25px" Placeholder="...Phone Format: (222) 444-7777" Width="320px" Wrap="False" BackColor="#EAF4FF" Font-Size="Large" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" MaxLength="50" ToolTip="Enter Agency Two Phone # Here" TabIndex="51"></asp:TextBox>
</div>
<div class="divTableCellTwo_33Pct">
<asp:TextBox ID="AgencyContact_2" runat="server" Height="25px" Width="320px" Wrap="False" BackColor="#EAF4FF" Font-Size="Large" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" MaxLength="100" ToolTip="Enter Agency Two Contact Name Here" TabIndex="52"></asp:TextBox>
</div>
</div>
<div class="divTableRow">
<div class="divTableCellTwo_33Pct_15HT">Agency Three Name</div>
<div class="divTableCellTwo_33Pct_15HT">Agency Three Phone</div>
<div class="divTableCellTwo_33Pct_15HT">Agency Three Contact Name (If Available) </div>
</div>
<div class="divTableRow">
<div class="divTableCellTwo_33Pct">
<asp:TextBox ID="AgencyName_3" runat="server" Height="25px" Width="320px" Wrap="False" BackColor="#EAF4FF" Font-Size="Large" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" MaxLength="150" ToolTip="Enter Agency Three Name Here" TabIndex="53"></asp:TextBox>
</div>
<div class="divTableCellTwo_33Pct">
<asp:TextBox ID="AgencyPhone_3" runat="server" Height="25px" Width="320px" Placeholder="...Phone Format: (222) 444-7777" Wrap="False" BackColor="#EAF4FF" Font-Size="Large" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" MaxLength="50" ToolTip="Enter Agency Three Phone # Here" TabIndex="54"></asp:TextBox>
</div>
<div class="divTableCellTwo_33Pct">
<asp:TextBox ID="AgencyContact_3" runat="server" Height="25px" Width="320px" Wrap="False" BackColor="#EAF4FF" Font-Size="Large" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" MaxLength="100" ToolTip="Enter Agency Three Contact Name Here" TabIndex="55"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="div_30Pix"></div>
<div class="div_20Pix"><asp:Button ID="Button1" Style="margin-left: 497px" runat="server" text="Submit" onclick="SubmitME_Click" usesubmitbehavior="true" /></div>
</form>
</div>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER