check all input values of same class is empty jquery

Question

Here I have many input text fields with same class like

<input type="text" class="MyClass"></input>
<input type="text" class="MyClass"></input>
<input type="text" class="MyClass"></input>

My requirement is to check wheather all input fields of this class is empty or not. I've tried this

if(!('.MyClass').val()){
alert("empty");
}

But it doesn't make any result. Can anyone help?

@Mr_Green $('.MyClass') will return array of items...

Rakesh_Kumar
– Rakesh_Kumar

2015-02-13 06:57:48 +00:00
Commented Feb 13, 2015 at 6:57 — Rakesh_Kumar
– Rakesh_Kumar, Commented Feb 13, 2015 at 6:57

Arun P Johny · Accepted Answer · 2015-02-13 07:03:28Z

22

You can check

$('button').click(function() {
  var $nonempty = $('.MyClass').filter(function() {
    return this.value != ''
  });

  if ($nonempty.length == 0) {
    alert('empty')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<button>test</button>

Or using a flag

$('button').click(function() {
  var flag = false;
  $('.MyClass').filter(function() {
    if (this.value != '') {
      flag = true;
      //no need to iterate further
      return false;
    }
  });

  if (!flag) {
    alert('empty')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<button>test</button>

edited Feb 13, 2015 at 7:03

answered Feb 13, 2015 at 6:57

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

Xander Over a year ago

This only works for the first input field. If you put something in one of them and leave the rest empty, it still thinks they're all filled.

Jon Bernhardt Over a year ago

@Xander that is what the OP asked for -- a way to test whether all fields are empty, not a way to test whether all fields are filled in.

Ranjan Kumar Over a year ago

remove the $ sign from variables in the first method.

Milind Anantwar · Accepted Answer · 2015-02-13 07:20:20Z

3

You can compare the length of number of input with number of empty input using :

var allemptylength=$(".MyClass").filter(function() {
    return this.value.length !== 0;
})});

if($('.MyClass').length== allemptylength.length){
  alert("all empty");
}

Working Demo

edited Feb 13, 2015 at 7:20

answered Feb 13, 2015 at 6:56

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

2 Comments

Arun P Johny Over a year ago

The input element can't have children so that will be always empty

dfsq Over a year ago

It will not work, as :empty checks content of the element, not its value.

slashsharp · Accepted Answer · 2015-02-13 06:59:49Z

1

To make sure each classes are checked, use

$.each($('.MyClass'),function() {
   if ($(this).val().length == 0) {
    alert('empty');
   }
});

answered Feb 13, 2015 at 6:59

slashsharp

2,8332 gold badges22 silver badges26 bronze badges

Comments

dfsq · Accepted Answer · 2015-02-13 07:00:04Z

1

You can check it like this:

var isEmpty = !$('.MyClass').filter(function() {
    return this.value.trim();
}).length;

Also remove all </input> tags. input elements are self-closable.

answered Feb 13, 2015 at 7:00

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

tvshajeer · Accepted Answer · 2015-02-13 07:20:15Z

0

try this

    var hasNoValue;
    $('.MyClass').each(function(i) {
        if ($(this).val() == '') {
              hasNoValue = true;
        }
    });
    if (hasNoValue) {
        alert('All have no value');
    }

edited Feb 13, 2015 at 7:20

tvshajeer

1,3292 gold badges12 silver badges28 bronze badges

answered Feb 13, 2015 at 7:09

ronronronang

13 bronze badges

Comments

Mateen · Accepted Answer · 2015-02-13 07:27:30Z

0

try is(':checked')

$('.MyClass').each(function(){
    alert($(this).is(':checked');)
});

this will alert only the checked elements.

answered Feb 13, 2015 at 7:27

Mateen

1,6911 gold badge23 silver badges28 bronze badges

Comments

Germán Augusto · Accepted Answer · 2017-05-09 11:24:10Z

0

$('input').each(function(index,value){
    if($(this).val()!=''){
        $(this).addClass('success');
    }else{
        $(this).removeClass('someClass');
        $(this).addClass('warning');
        $(this).css('border', '1px solid red');
        //do something else...
    }
});

answered May 9, 2017 at 11:24

Germán Augusto

11 gold badge1 silver badge2 bronze badges

Comments

Waheed Asghar · Accepted Answer · 2018-01-18 12:32:18Z

0

Try this . 100% working..

var emptyLength = $(".MyClass").filter(function() {
    return this.value == "";
}).length;
 if (emptyLength > 0)
{
    alert("Please enter all peramerter's value");
    return;
}

Thanks.

answered Jan 18, 2018 at 12:32

Waheed Asghar

1791 silver badge11 bronze badges

Comments

chrslg · Accepted Answer · 2023-01-01 10:55:21Z

0

Try this. It works for me

var flag = 1;
$(".MyClass").each(function(i){
    if ($(this).val() == "")
        flag++;
});
if (flag == 1)
    alert('all have values');
else
    alert('some or all doesn\'t have value');

edited Jan 1, 2023 at 10:55

chrslg

15.2k11 gold badges26 silver badges42 bronze badges

answered Feb 5, 2016 at 1:51

Cedrick Dayangco

1

Collectives™ on Stack Overflow

check all input values of same class is empty jquery

9 Answers 9

3 Comments

Working Demo

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related