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;

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;

• javascript
• jquery
• html
• validation

3 Answers 3

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./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>

Here's a simple one-liner using Array.reduce():

$(".your-div input").reduce((allFilled, input) =>
  allFilled && $.trim($(input).val()) !== "", true)

This approach will match any input be it input, select, textarea etc

var canSubmit = true;
$.each($('.div-in-question').find(':input'), function(element, index){
    canSubmit = canSubmit && ($(element).val() !== '');
});
// at this point canSubmit will be true or false and you can act upon it