Check if all inputs with a certain class are empty using jQuery

Question

I'm trying to check if all input fields with a certain class are empty. Right now I have the following code:

HTML

<input type="text" class="required-entry">
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<button class="check-fields">Check Fields</button>

jQuery

$('.check-fields').on('click', function () {

  var value = $('.required-entry').filter(function () {
    return this.value != '';
  });

  if (value.length == 0) {
    alert('Please fill out all required fields.');
  } else if (value.length > 0) {
    alert('Everything has a value.');
  }
});

But this throws the message "Everything has a value." if ANY one of the inputs has a value. I'm trying to only throw that message when every input with this class has something in it.

$('.check-fields').on('click', function () {

    var value = $('.required-entry').filter(function () {
        return this.value != '';
    });

    if (value.length == 0) {
        console.log('Please fill out all required fields.');
    } else if (value.length > 0) {
        console.log('Everything has a value.');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<button class="check-fields">Check Fields</button>

I also have this fiddle with slightly different code.. also throws the Everything has a value message when the first input is the only one filled.

$('.check-fields').on('click', function () {
    
    if($.trim($('.required-entry').val()) === '') {
        console.log('Please fill out all required fields.');
    } else {
        console.log('Everything has a value.');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<button class="check-fields">Check Fields</button>

Compare for this.value === ''; This way you know that at least 1 has nothing in it. — Maxwell Donathan
– Maxwell Donathan, Commented Aug 10, 2015 at 15:53
What? instead of return this.value != '';? This makes it always say please fill out all required fields — Xander
– Xander, Commented Aug 10, 2015 at 16:00

Srinu Chinka · Accepted Answer · 2015-08-10 16:02:17Z

17

check the following code:

$('.check-fields').on('click', function () {

    var reqlength = $('.required-entry').length;
    console.log(reqlength);
    var value = $('.required-entry').filter(function () {
        return this.value != '';
    });

    if (value.length>=0 && (value.length !== reqlength)) {
        alert('Please fill out all required fields.');
    } else {
        alert('Everything has a value.');
    }
});

answered Aug 10, 2015 at 16:02

Srinu Chinka

1,48913 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Xander Over a year ago

That did it! Makes sure they're all filled!

Jonathan · Accepted Answer · 2017-09-12 12:20:12Z

You might have to change condition for the same like following, Do empty checking.

var value = $('.required-entry').filter(function () {
    return this.value === '';
});

Depends on above condition you can change if condition, you will get 0 count if all inputs have value, other wise >0 count.

if (value.length == 0) {
   alert('Everything has a value.');
} 
else if (value.length > 0) {
    alert('Please fill out all required fields.');
}

Example

$('.check-fields').on('click', function () {
 var value = $('.required-entry').filter(function () {
    return this.value === '';
  });
  if (value.length == 0) {alert('Everything has a value.');
  } else if (value.length > 0) {
    alert('Please fill out all required fields.');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<input type="text" class="required-entry">
<button class="check-fields">Check Fields</button>

Coding Duchess · Accepted Answer · 2015-08-10 16:01:18Z

2

 $('input[type="text"]').each(function() {
        if ($.trim($(this).val()) == '') {
           alert('Please fill out all required fields.');

        }
        else {
            alert('Everything has a value.');

        }
    });

or

 $('input[class="required-entry"]').each(function() {
        if ($.trim($(this).val()) == '') {
           alert('Please fill out all required fields.');

        }
        else {
            alert('Everything has a value.');

        }
    });

answered Aug 10, 2015 at 16:01

Coding Duchess

7,01927 gold badges146 silver badges245 bronze badges

1 Comment

Xander Over a year ago

This makes the alert pop up for each and every input field that is empty. I want to check all input fields, and popup the message once at the end.

daniel · Accepted Answer · 2015-08-10 15:59:14Z

0

Maybe you could settle for

<input type="text" class="semantic-classname" required />

http://caniuse.com/#feat=form-validation

answered Aug 10, 2015 at 15:59

daniel

1,4339 silver badges17 bronze badges

1 Comment

Xander Over a year ago

It's to stop a button from doing something, not at the form submit button yet.

Collectives™ on Stack Overflow

Check if all inputs with a certain class are empty using jQuery

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related