Question

I need to hide div id=”FormStep” when will be check last input.

On my page I use this HTML code:

<div id="FormStep">
  <input type="text" name="test1" id="test1" class="validate" />
  <div id="Checktest1Input"></div>
  <input type="text" name="test2" id="test2" class="validate" />
  <div id="Checktest2Input"></div>
  <input type="text" name="test3" id="test3" class="validate" />
  <div id="Checktest3Input"></div>
<input type="button" id="Step" value="Send"/>
</div>

For validation on the page I use this JS code:

$('#Step').on('click',function(){
    $('.validate').each(function(){

        if ($(this).val().length == 0){
        $('#Check'+this.id+'Input').html('false');
          return false;
        } else {
        $('#Check'+this.id+'Input').html('true');
        }

      });
});

Tell me please how I can add code $('#Step').hide(); that this code $('#Step').hide(); perform after check last input?

Answer 1

Working fiddle

$('#Step').on('click',function(){
    var hideStep = true;
    $('.validate').each(function(){

        if ($(this).val().length == 0){
        $('#Check'+this.id+'Input').html('false');
          hideStep = false;
          return false;
        } else {
        $('#Check'+this.id+'Input').html('true');
        }
      });
    if (hideStep)
      $('#Step').hide();
});