0

I am trying to check if all divs are visible, and if they are then to not show a div which contains a submit button. All the divs are basically validators that only show if there are errors. This is because I cannot use Jquery validator. I am doing this on a timer so it can check every 5 seconds, instead of using a button. Also - It is not possible to link the validation to the button.

What I've tried:
JS: 

     window.setInterval(function(){
     if ($(".needData:hidden").length == 0) {
         $(".answer").show();
         $(".pleaseval").hide();

    }else{
         $(".answer").hide();
         $(".pleaseval").show();
             }       
        }, 5000);

HTML:

div id="myClass" class="needData" style="display:none">hidden</div>
div id="myClass1" class="needData" style="display:none">hidden</div>
div id="myClass2"  class="needData" style="display:none">hidden</div>
div id="myClass3" class="needData" style="display:none">hidden</div>
<div class="pleaseval">Please fill out form</div>

<div id="answer" class="answer"><button>button</button></div>
Stacker
  • 113
  • 9
  • 1
    You should consider performing the given action on Event, rather than polling to check a given state. [This](http://stackoverflow.com/questions/1462138/js-event-listener-for-when-element-becomes-visible) might be useful. – SDekov May 23 '16 at 15:22
  • I should, but for stupid reasons which take way to long to explain, I cannot – Stacker May 23 '16 at 15:23
  • Not seeing any div with class answer & pleaseval. Please update the snippet. Also use :visible instead of :hidden – brk May 23 '16 at 15:25
  • done, thanks for pointing it out – Stacker May 23 '16 at 15:31
  • You don't need Validator. Just do your check on change of the input values, etc. – isherwood May 23 '16 at 15:33

1 Answers1

1

You target .answer in js but don't you actually need #answer?

Like this:

window.setInterval(function(){
     if ($(".needData:visible").length == 0) {
         $("#answer").show();
         $(".pleaseval").hide();

    }else{
         $("#answer").hide();
         $(".pleaseval").show();
    }       
}, 5000);

Here you can see test of it https://jsfiddle.net/8bL8ywzu/

And if you remove style="display:none" from one element you'll see that after 5s button will be hidden.

jakob
  • 3,265
  • 4
  • 23
  • 40
  • What is diffrence between your code and code in question unless your changed `.answer` to `#answer`? – Mohammad May 23 '16 at 15:33
  • @Mohammad question is edited in the meantime. Except that instead of `:hidden` I set `:visible` – jakob May 23 '16 at 15:36
  • There isn't any difference really, as I was refering to class and id correctly in my code, I just messed up puting it on stackoverflow. Ill see if theres some other issue – Stacker May 23 '16 at 15:37
  • @Stacker So this isn't this what you need? Every 5s it checks if all elements are hidden and if not it hides button. – jakob May 23 '16 at 15:40
  • Yes, that works in fiddle and I'm just trying to get it working on my code. Ill mark it correct – Stacker May 23 '16 at 15:48