Validate only if shown on screen

Validate only if shown on screen

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>