проверить только видимые элементы в форме

Question

Я хочу проверить элементы формы при щелчке следующего buttoon в виде шага. Я использую следующий код, который также проверяет все скрытые поля. Нужна помощь. Заранее спасибо ..

Вот мой код:

$('.msf-form .btn-next').on('click', function() {         
    var parent_fieldset = $(this).parents('fieldset'); 
    var next_step = true; 


    parent_fieldset.find('.is_required').each(function() { 
     if($(this).val() == "") { 
      $(this).focus().css('border','1px solid #F44336'); 
      $(".error-messages-slct").text("Please Select an option in the list").fadeIn(); 
      next_step = false; 
     } 
     else{ 
     $(this).focus().css('border','0px solid #F44336'); 
     $(".error-messages-slct").empty().fadeOut(); 

    } 
    }); 

    parent_fieldset.find('.is_required1').each(function() { 
     if($(this).val() == "") { 
      $(this).focus().css('border','1px solid #F44336'); 
      $(".error-messages-slct1").text("Select an option in the list").fadeIn(); 
      next_step = false; 
     } 
     else{ 
     $(this).focus().css('border','0px solid #F44336'); 
     $(".error-messages-slct1").empty().fadeOut(); 

    } 
    }); 

    if(next_step) { 
     parent_fieldset.fadeOut(400, function() { 
      $(this).next().fadeIn(); 
     }); 
    } 

}); 

Answer 1

вы можете добавить :visible после селекторов. Используйте эту ссылку ..

Use it like this

Answer 2

Вместо того, чтобы идти по каждому элементу класса «.is_required1' и» .is_required», вы должны сделать это только для этого элемента (ов), который (которые) в настоящее время видимый. Вы можете использовать для этого дополнительный класс или запросить свойство отображения.

Принимая во внимание предложение minksmnm, вы можете использовать find('.is_required:visible') вместо `` find ('. Is_required') `, чтобы выбирать только видимые элементы. В других случаях ваша находка также получает скрытые и проверяет их.