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;

Zakaria Acharki · Accepted Answer · 2016-12-30T15:39:34.657

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>

score 2 · Answer 2 · answered Dec 30 '16 at 15:36

2

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

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

answered Dec 30 '16 at 15:36

Rommel Santor

1,021
7
10

thank you this is a very slick way of doing it. Does this return a boolean value? – akasoggybunz Dec 30 '16 at 15:46
1

Yep! The good thing about `Array.reduce()` is you get to define what it ultimately returns. In my example, I pass in `true` as the initial result value, and in each element's callback, we also return a boolean, so the final result will be the same. – Rommel Santor Dec 30 '16 at 15:53

score 1 · Answer 3 · answered Dec 30 '16 at 15:40

1

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

answered Dec 30 '16 at 15:40

Dale

10,384
21
34

if i added input[required] in the find(). This would work. Correct? – akasoggybunz Dec 30 '16 at 15:48

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

3 Answers3