locked
Validate only visible elements (without Jquery) RRS feed

  • Question

  • User876561910 posted

    I know how to do this in Jquery but I’m trying to do it plain Javascript.

    Basically I’m trying to find a simple way to on validate object which are inside a visible Div (using JS).

    The code below will not work as the objected are hidden but still part of the collection.

    Using standard JS like this document.getElementById(which).style. visibility = " hidden": "visible"; also won’t work for the same reason

    But I thought occurred to me.

    Rather than setting visibility = " hidden" Is there a way to set Visible = “False” in JS as that would work, maybe.

    Has anyone got a standard JS function to only validate element inside a visible Div?




    Here is the type of thing I working on

    <!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" />
    <title></title>
    
    <script language="javascript" type="text/javascript">
            function DisplayDivs() {
                var txt = document.getElementById("<%=MyDDL.ClientID %>").value;
    		var numdivs = 3;
    		var num = document.getElementById("MyDDL").value;
    		for (var i =1; i<=numdivs; i++) {
    		var which = "MyDiv_" + i;  
    			document.getElementById(which).style.display = num>=i? "block" : "none"; }}
        </script>
    
    
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    Show divs 
    <asp:DropDownList runat="server" id="MyDDL" OnChange="DisplayDivs()">
    	<asp:listitem Value="0"></asp:listitem>
    	<asp:listitem Value="1"></asp:listitem>
    	<asp:listitem Value="2"></asp:listitem>	
    	<asp:listitem Value="3"></asp:listitem>
    </asp:DropDownList>
    <br/><br/>
    <div id="MyDiv_1" style="display:none">
    This is Div 1 <asp:TextBox runat="server" id="txt1"></asp:TextBox>
    <asp:RequiredFieldValidator runat="server" ErrorMessage="Please add a value to box 1" id="RFV1" ControlToValidate="txt1">
    </asp:RequiredFieldValidator>
    </div><br/>
    <div id="MyDiv_2" style="display:none">
    This is Div 2 <asp:TextBox runat="server" id="txt2"></asp:TextBox>
    <asp:RequiredFieldValidator runat="server" ErrorMessage="Please add a value to box 2" id="RFV2" ControlToValidate="txt2">
    </asp:RequiredFieldValidator>
    </div><br/>
    <div id="MyDiv_3" style="display:none">
    This is Div 3 <asp:TextBox runat="server" id="txt3"></asp:TextBox>
    <asp:RequiredFieldValidator runat="server" ErrorMessage="Please add a value to box 3" id="RFV3" ControlToValidate="txt3">
    </asp:RequiredFieldValidator>
    </div>
    <asp:Button runat="server" Text="Click me" id="MyButton" PostBackUrl="MyNextPage.aspx"></asp:Button>
    </form>
    
    </body>
    
    </html>
    





    Saturday, December 22, 2018 5:07 PM

Answers

All replies

  • User475983607 posted

    See querySelectorAll.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsDemo.aspx.cs" Inherits="WebFormsApp.JsDemo" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
          <form id="form2" runat="server">
                Show divs 
                <asp:DropDownList runat="server" ID="MyDDL" onchange="DisplayDivs()">
                    <asp:ListItem Value="0"></asp:ListItem>
                    <asp:ListItem Value="1"></asp:ListItem>
                    <asp:ListItem Value="2"></asp:ListItem>
                    <asp:ListItem Value="3"></asp:ListItem>
                </asp:DropDownList>
                <br />
                <br />
                <div id="MyDiv_1" style="display: none">
                    This is Div 1
                    <asp:TextBox runat="server" ID="txt1"></asp:TextBox>
                    <asp:RequiredFieldValidator runat="server" ErrorMessage="Please add a value to box 1" ID="RFV1" ControlToValidate="txt1">
                    </asp:RequiredFieldValidator>
                </div>
                <br />
                <div id="MyDiv_2" style="display: none">
                    This is Div 2
                    <asp:TextBox runat="server" ID="txt2"></asp:TextBox>
                    <asp:RequiredFieldValidator runat="server" ErrorMessage="Please add a value to box 2" ID="RFV2" ControlToValidate="txt2">
                    </asp:RequiredFieldValidator>
                </div>
                <br />
                <div id="MyDiv_3" style="display: none">
                    This is Div 3
                    <asp:TextBox runat="server" ID="txt3"></asp:TextBox>
                    <asp:RequiredFieldValidator runat="server" ErrorMessage="Please add a value to box 3" ID="RFV3" ControlToValidate="txt3">
                    </asp:RequiredFieldValidator>
                </div>
                <asp:Button runat="server" Text="Click me" ID="MyButton" PostBackUrl="MyNextPage.aspx"></asp:Button>
            </form>
    
        <script>
            function DisplayDivs() {
                var divId = "MyDiv_" + document.getElementById("<%=MyDDL.ClientID %>").value;
                var divs = document.querySelectorAll("[id^='MyDiv']");
                for (var i = 0; i < divs.length; i++) {
                   document.getElementById(divs[i].id).style.display = divs[i].id == divId ? "block" : "none";
                }
            }
        </script>
    </body>
    </html>
    

    Saturday, December 22, 2018 7:31 PM
  • User876561910 posted

    I have looked through the linked page and can't find any - am I missing something ?
    https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

    Also your code gives a Which Div Do You Want To See

        <script>
            function DisplayDivs() {
                var divId = "MyDiv_" + document.getElementById("<%=MyDDL.ClientID %>").value;
                var divs = document.querySelectorAll("[id^='MyDiv']");
                for (var i = 0; i < divs.length; i++) {
                   document.getElementById(divs[i].id).style.display = divs[i].id == divId ? "block" : "none";
                }
            }
        </script>


    The code I used gives
    Which Divs Do You Want To See  (note Divs plural)

    <script>
            function DisplayDivs() {
                var txt = document.getElementById("<%=MyDDL.ClientID %>").value;
    		var numdivs = 3;
    		var num = document.getElementById("MyDDL").value;
    		for (var i =1; i<=numdivs; i++) {
    		var which = "MyDiv_" + i;  
    			document.getElementById(which).style.display = num>=i? "block" : "none"; }}
    </script>
    

    Saturday, December 22, 2018 9:23 PM
  • User475983607 posted

    I have looked through the linked page and can't find any - am I missing something ?
    https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

    The link show fetch several elements rather than hard coding the number of div elements.

    The code I used gives
    Which Divs Do You Want To See  (note Divs plural)

    I thought the select value mapped to the a div element.     The idea is select one to show 1 div elements.  Select 2 to show 2 div elements.  That's a fair simple code change if I understand the requirement.

        <script>
            function DisplayDivs() {
                var num = document.getElementById("<%=MyDDL.ClientID %>").value;
                var divs = document.querySelectorAll("[id^='MyDiv']");
                for (var i = 0; i < divs.length; i++) {
                   document.getElementById(divs[i].id).style.display = i < num ? "block" : "none";
                }
            }
        </script>

     

    Saturday, December 22, 2018 9:59 PM
  • User876561910 posted

    Back to the question

    Can anyone help with a method of validating only visible elements in Java (not Jquery)

    Sunday, December 23, 2018 6:54 AM
  • User475983607 posted


    Can anyone help with a method of validating only visible elements in Java (not Jquery)

    Use ValidatorEnable(val, bool).  

    https://www.aspsnippets.com/Articles/Enable-Disable-ASPNet-Validator-Client-Side-Validation-using-JavaScript-or-jQuery.aspx

    https://docs.microsoft.com/en-us/previous-versions/aspnet/7kh55542(v=vs.100)

        <script>
            function DisplayDivs() {
                var num = document.getElementById("<%=MyDDL.ClientID %>").value;
                var divs = document.querySelectorAll("[id^='MyDiv']");
                for (var i = 0; i < divs.length; i++) {
                    document.getElementById(divs[i].id).style.display = i < num ? "block" : "none";
    
                    rfv = document.getElementById('RFV' + (i + 1));
                    ValidatorEnable(rfv, i < num); 
                }
            }
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, December 23, 2018 12:29 PM
  • User876561910 posted

    Good find.

    After the Christmas break I'll have a look at automating this

        function ToggleValidator(chk) {
    
            var valName = document.getElementById("<%=valName.ClientID%>");
    
            ValidatorEnable(valName, chk.checked);}

    In the real world I have many Divs with many elements and the whole idea is to cut down on bloat.
    But it should be possible to alter the toggle OnClick

    Thanks

    Sunday, December 23, 2018 5:35 PM
  • User876561910 posted

    That's me out of the office until 3rd Jan.

    Happy Christmas to all

    Sunday, December 23, 2018 5:36 PM