Jquery - How to check if all inputs in a div are not empty?

Question

Looking for a simple way to validate all required inputs, in a certain div. In other words make sure all required inputs within a certain div are not empty.

This following code which was found here, shows a way to check all inputs and make sure they aren't empty (including inputs with only spaces in them) on a given page.

I am trying to do the same thing. Just within a certain div and for all required inputs.

$("input").filter(function () {
    return $.trim($(this).val()).length == 0
}).length == 0;

Answer 1

You could do the same thing, but you should change the selector to target just the input's inside a given div and add [required] selector to select just those who have required attribute :

$("div_selector input[required]").filter(function () {
    return $.trim($(this).val()).length == 0
}).length == 0;

Hope this helps.

$('button').on('click',function(){
  var result = $("#div_selector input[required]").filter(function () {
    return $.trim($(this).val()).length == 0
  }).length == 0;

  console.log(result);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name='first' required> Required input out of the div 

<div id='div_selector'>
  <input name='second' required> Required input
  <br>
  <input name='Third'>
  <br>
  <input name='Fourth' required> Required input
</div>
<br>
<button>Check</button>