Validate only if shown on screen
in Using jQuery Plugins
•
5 years ago
Hi all
New to JQ as I normally use plain JS.
But !!! am having a real pig of a job doing a validation on a
web form, so wondered if someone could help.
I have shown a simple example below.
The problem I'm having is that JS does not change the
display state in the html (checked by JS) so it fails to pick up on
changes from style.block to style.none .
Is there a way to do with JQ ???
Basically I only want to validate boxes in a div that is shown
on the screen.
Thanks is anyone can help.
Here is an example (you'll need to create another form
called delete2.aspx to make it work)
(Hope I've posted this right)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@
Page Language="C#" %>
<html dir="ltr"
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta
content="text/html; charset=utf-8"
http-equiv="Content-Type" />
<script type="text/jscript">
function selectdivs() {
var numdivs = 3;
var num =
document.getElementById("div_select").value;
for (var i
=1; i<=numdivs; i++) {
var which = "div_number_" +
i;
document.getElementById(which).style.display = num>=i?
"block" :
"none";
}}
</script>
<script
language="javascript"
type="text/javascript">
function
ValidateInput1(src, args) {
if
(document.getElementById("div_number_1").style.display ==
'block') {
var dItem_a1 =
document.getElementById('<%=txt_box_a1.ClientID
%>');
var dItem_a2 =
document.getElementById('<%=txt_box_a2.ClientID
%>');
var dItem_a3 =
document.getElementById('<%=txt_box_a3.ClientID
%>');
if (dItem_a1.value == "" ||
dItem_a2.value == "" || dItem_a3.value == "")
args.IsValid = false;
}
else {
args.IsValid = true;
}
}
{
if
(document.getElementById("div_number_2").style.display ==
'block') {
var dItem_b1 =
document.getElementById('<%=txt_box_b1.ClientID
%>');
var dItem_b2 =
document.getElementById('<%=txt_box_b2.ClientID
%>');
var dItem_b3 =
document.getElementById('<%=txt_box_b3.ClientID
%>');
if (dItem_b1.value == "" ||
dItem_b2.value == "" || dItem_b3.value == "")
args.IsValid = false;
}
else {
args.IsValid = true;
}
}
{
}
</script>
</head>
<body>
<form id="form1"
runat="server">
<asp:CustomValidator
ID="CustomValidator1"
runat="server"
ClientValidationFunction="ValidateInput1"
ErrorMessage="Please put text into all visible boxes">
</asp:CustomValidator>
<br />
<br />
How many divs do you want to
see?
<asp:DropDownList id="div_select"
runat="server" AutoPostBack="false"
OnChange="selectdivs()">
<asp:listitem>0</asp:listitem>
<asp:listitem>1</asp:listitem>
<asp:listitem>2</asp:listitem>
</asp:DropDownList>
<div
id="div_number_1" style="display:
none">
<br />
This is Div A<br
/>
<asp:TextBox id="txt_box_a1"
runat="server"></asp:TextBox>
<asp:TextBox
id="txt_box_a2"
runat="server"></asp:TextBox>
<asp:TextBox
id="txt_box_a3"
runat="server"></asp:TextBox>
<br
/>
</div>
<div id="div_number_2"
style="display: none">
<br />
This is
Div B<br />
<asp:TextBox id="txt_box_b1"
runat="server"></asp:TextBox>
<asp:TextBox
id="txt_box_b2"
runat="server"></asp:TextBox>
<asp:TextBox
id="txt_box_b3"
runat="server"></asp:TextBox>
<br
/>
</div>
<br />
<br
/>
<br />
<asp:Button id="Continue"
runat="server" PostBackUrl="delete2.aspx" Text="Button">
</asp:Button>
</form>
</body>
</html>