Search jQuery

jQuery Forum

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">

<body>

</body>

</html>

Replies(5)

JaneHollin

Re: Validate only if shown on screen

5 years ago

It's OK.

I worked it out.

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script language="javascript" type="text/javascript">
function ValidateInput(src, args) {
if($('#div_number_3').is(':visible')){
              var dItem_c1 = document.getElementById('<%=txt_box_c1.ClientID %>');
              var dItem_c2 = document.getElementById('<%=txt_box_c2.ClientID %>');
              var dItem_c3 = document.getElementById('<%=txt_box_c3.ClientID %>');
               if (dItem_c1.value == "" || dItem_c2.value == "" || dItem_c3.value == "")
                  args.IsValid = false;
          }
          else if ($('#div_number_2').is(':visible')){
                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 if ($('#div_number_1').is(':visible')){
                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;
                }
            }
        }
</script>

kbwood.au

Re: Re: Validate only if shown on screen

5 years ago

Using more jQuery you could do this:

function ValidateInput(src, args) {
args.IsValid = true;
function isBlank() {
return $.trim($(this).val()) == '';
}
if ($('#div_number_3').is(':visible')) {
args.IsValid = $('#div_number_3 input').filter(isBlank).length == 0;
}
else if ($('#div_number_2').is(':visible')) {
args.IsValid = $('#div_number_2 input').filter(isBlank).length == 0;
}
else if ($('#div_number_1').is(':visible')) {
args.IsValid = $('#div_number_1 input').filter(isBlank).length == 0;
}
}

JaneHollin

Re: Validate only if shown on screen

5 years ago

Hi

Thank you very much for that - I am learning all the time.

How would I add to the jquery to cope with a few drop down list on each div.

Like this (I have included your validator)

<!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">
<script src="https://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<link href="jquery-ui.css" rel="Stylesheet" type="text/css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#mydate").datepicker({
                dateFormat: 'dd/mm/yy',
                beforeShowDay: function (dt) { return [dt.getDay() == 0 || dt.getDay() == 1, ""]; }
            });
        });
function ValidateInput(src, args) {
      args.IsValid = true;
      function isBlank() {
            return $.trim($(this).val()) == '';
      }
      if ($('#div_number_3').is(':visible')) {
            args.IsValid = $('#div_number_3 input').filter(isBlank).length == 0;
      }
      else if ($('#div_number_2').is(':visible')) {
            args.IsValid = $('#div_number_2 input').filter(isBlank).length == 0;
      }
      else if ($('#div_number_1').is(':visible')) {
            args.IsValid = $('#div_number_1 input').filter(isBlank).length == 0;
      }
}
function selectdivs() {
var numdivs = 2;
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>
</head>
<body>
<form id="form1" runat="server">
<input name="Text1" id="mydate" type="text" />

<br/>
<asp:CustomValidator ID="CustomValidator" runat="server" ClientValidationFunction="ValidateInput" 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>
  <asp:DropDownList id="ddl_a1" runat="server">
  <asp:listitem></asp:listitem>
  <asp:listitem>X</asp:listitem>
  <asp:listitem>Y</asp:listitem>
  <asp:listitem>Z</asp:listitem>
  </asp:DropDownList>

  <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>
  <asp:DropDownList id="ddl_b1" runat="server">
  <asp:listitem></asp:listitem>
  <asp:listitem>A</asp:listitem>
  <asp:listitem>B</asp:listitem>
  <asp:listitem>C</asp:listitem>
  </asp:DropDownList>

  <br />
</div>
<br />
<asp:Button id="btnSubmit" runat="server" postbackurl="delete2.aspx" text="Continue" />

</form>
</body>
</html>

JaneHollin

Re: Validate only if shown on screen

5 years ago

it's OK I got it

function ValidateInput(src, args) {
      args.IsValid = true;
      function isBlank() {
            return $.trim($(this).val()) == '';
      }
       if ($('#div_p3').is(':visible')) {
            args.IsValid = $('#div_p3 input').filter(isBlank).length == 0&& $('#div_p3 select').filter(isBlank).length == 0;
      }
      else if ($('#div_p2').is(':visible')) {
            args.IsValid = $('#div_p2 input').filter(isBlank).length == 0&& $('#div_p2 select').filter(isBlank).length == 0;
      }
      else if ($('#div_p1').is(':visible')) {
            args.IsValid = $('#div_p1 input').filter(isBlank).length == 0&& $('#div_p1 select').filter(isBlank).length == 0;
      }
   }
    </script>

kbwood.au

Re: Validate only if shown on screen

5 years ago

You can combine the queries:

args.IsValid = $('#div_p3').find('input,select').filter(isBlank).length == 0;

Top Reply

Response title

Attachments

jQuery Forum

Validate only if shown on screen

Replies(5)

Re: Validate only if shown on screen

Re: Re: Validate only if shown on screen

Re: Validate only if shown on screen

Re: Validate only if shown on screen

Re: Validate only if shown on screen

Statistics

Tags

Actions