Check all input fields have been filled out with jQuery

Question

I have 3 divs, each with a dfew input fields and next button on. I want to write a snippet of jQuery that when the next button is clicked it checks to ensure all input fields WITHIN the same div as the button, are not null.

I've tried the following with no luck but Im 100% certain its wrong, only I cant find the relevant information online...

http://jsfiddle.net/xG2KS/1/

James Allardice · Accepted Answer · 2012-01-18T09:45:43.460

You could use filter to reduce the set of all input elements to only those that are empty, and check the length property of what remains:

$(".next").click(function() {
    var empty = $(this).parent().find("input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {
        //At least one input is empty
    }
});

Note that the definition of empty in the above code is an empty string. If you want to treat blank spaces as empty too, you may want to trim the value before comparing.

Also note that there is no need to pass this into jQuery inside the filter function. The DOM element itself will have a value property, and it's much faster to access that instead of using val.

Here's an updated fiddle.

How can use this with a form with input text and select? – Abiel Muren May 03 '17 at 21:31 — Abiel Muren, May 03 '17 at 21:31

Alex Pliutau · Answer 2 · 2012-01-18T09:42:39.390

8

$('.next').click(function() {
    var emptyInputs = $(this).parent().find('input[type="text"]').filter(function() { return $(this).val() == ""; });
    if (emptyInputs.length) {
        alert('Fail!');
    }
});

edited Jan 18 '12 at 09:42

answered Jan 18 '12 at 09:33

Alex Pliutau

21,392
27
113
143

Thanks @garvey!, is there a way to say, if ANY input is empty throw one alert as oppposed to looping? – Liam Jan 18 '12 at 09:35
How can I inclue selects too?? – Abiel Muren May 03 '17 at 21:36

score 1 · Answer 3 · answered Jun 19 '19 at 22:12

Because there is no jQuery selector for this case you can extend jQuery’s selector capabilities.

Assuming you select all :text elements, the extension is:

$.extend($.expr[':'],{
     isEmpty: function(e) {
         return e.value === '';
     }
});

Hence, you can select all empty text fields:

$(this).closest('div').find(':text:isEmpty');

$.extend($.expr[':'], {
  isEmpty: function (e) {
      return e.value === '';
  }
});
$('.next').click(function () {
      var missingRequired = $(this).closest('div').find(':text:isEmpty');
  console.log('Empty text fields: ' + missingRequired.length);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="submit" value="next" class="next" />
</div>
<div>
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="submit" value="next" class="next"  />
</div>
<div>
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="submit" value="next" class="next"  />
</div>

score -1 · Answer 4 · answered Jan 18 '12 at 09:42

-1

$('.next').click(function() {
    var inputs = $(this).parent().find('input[value=""]');
    if (!inputs.length) {
        // you have empty fields if this section is reached
    }
});

answered Jan 18 '12 at 09:42

This will say there are empty inputs even if there are none, because it looks at the `value` *attribute* rather than the property. – James Allardice Jan 18 '12 at 09:44
I don't follow? As I'm not as well versed in jQuery as I should be, would you mind explaining? – Jan 18 '12 at 09:47
3

You've used an attribute selector to find elements whose `value` attribute is equal to the empty string. The `value` *attribute* is what is defined on the element itself: ``. Since none of the `input` elements in question have a `value` attribute, your code will always say they are all empty. – James Allardice Jan 18 '12 at 09:50

Check all input fields have been filled out with jQuery

4 Answers4

Linked