5

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>

3
  • 1
    Compare for this.value === ''; This way you know that at least 1 has nothing in it.
    – StaticVoid
    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
    Commented Aug 10, 2015 at 16:00
  • Dhaval's answer elaborates..
    – StaticVoid
    Commented Aug 10, 2015 at 16:22

4 Answers 4

16

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.');
    }
});
1
  • That did it! Makes sure they're all filled!
    – Xander
    Commented Aug 10, 2015 at 16:09
6

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>

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.');

        }
    });
1
  • 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.
    – Xander
    Commented Aug 10, 2015 at 16:04
0

Maybe you could settle for

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

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

1
  • It's to stop a button from doing something, not at the form submit button yet.
    – Xander
    Commented Aug 10, 2015 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.