How to check if several dynamically created input is empty?

Question

I have this Input that is generating via Knockoutjs:

<input type="text" class="req" placeholder="" data-bind="value:Request" />

But I have to check if it is empty and if I am applying a specific css: As it can be created several equal fields, I can only apply in the first field my validation.

My Javascript:

if ($(".req").val() == "") { 
    $(".req").addClass(validationClassErrosType.input)
}
validationCheckImage($("#req"), $("#req").parent());

The image of the input:

Well he always takes the first class. how could he do this via Avascript?

Answer 1

I made a basic example with jQuery, see if you can adapt to your case.

$('#testarInputs').click(function(){
  $('.teste').each(function(){
    if(this.value == ''){
      $(this).css('border','1px solid red');
    }else{
      $(this).css('border','');
    }
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="teste">
<input class="teste">
<input class="teste">
<input class="teste">
<input class="teste">
<input class="teste">
<input class="teste">
<input class="teste">
<input class="teste">

<input type="button" id="testarInputs" value="Testar">

Answer 2

Try this :

for(var x = 0; x < $('.req').length; x++){
 if($('.req')[x].val() === ""){
  console.info("Adicionar Css");    
 }
}