jQuery - Find any input with a given class that has no value

Question

I have a (very) basic validation script. I basically want to check for any inputs with class .required to see if there values are a) blank or b) 0 and if so, return false on my form submit. This code does not seem to return false:

function myValidation(){
  if($(".required").val() == "" || $(".required").val() == 0){
  $(this).css({ backgroundColor:'orange' })  ;
  return false;
  }
}

Appending this function to my onSubmit handler of my form is not returning any results. Any light shed on this matter will be appreciated.

I am basically after a function that iterates through all the inputs with class .required, and if ANY have blank or 0 values, return false on my submit and change the background colour of all badly behaved inputs to orange.

djdd87 · Accepted Answer · 2010-08-13 13:46:23Z

11

Your code currently gets the .val() for the first .required, from the .val() documentation:

Get the current value of the first element in the set of matched elements.

You need to filter through each one individually instead, like this:

function myValidation(){
  var allGood = true;
  $(".required").each(function() {
     var val = $(this).val();
     if(val == "" || val == 0) {
       $(this).css({ backgroundColor:'orange' });
       allGood = false;
     }
  });
  return allGood;
}

Or a bit more compact version:

function myValidation(){
  return $(".required").filter(function() {
     var val = $(this).val();
     return val == "" || val == 0;
  }).css({ backgroundColor:'orange' }).length === 0;
}

edited Aug 13, 2010 at 13:46

djdd87

68.6k29 gold badges159 silver badges198 bronze badges

answered Aug 13, 2010 at 13:41

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

2 Comments

djdd87 Over a year ago

I had to make a contribution one way or another :). No problemo.

SimonDowdles Over a year ago

Spot On, works like a bomb thanks. May be worth mentioning that it did not work as a function on the onSubmit action of the form, but when used as a straight set of checks attached to $("#myForm").submit(function(){ ..code above goes here ... }); it worked like a dream, thanks!

Travis Waelbroeck · Accepted Answer · 2024-01-16 14:16:07Z

4

Try this jQuery selector:

$('.required[value=""], .required[value=0]')

JS Documentation: Selectors

edited Jan 16, 2024 at 14:16

Travis Waelbroeck

2,1551 gold badge16 silver badges27 bronze badges

answered Aug 13, 2010 at 13:43

TimS

6,0426 gold badges38 silver badges56 bronze badges

Comments

Mutation Person · Accepted Answer · 2010-08-13 13:45:16Z

1

You could also do it by defining your own custom jQuery selector:

$(document).ready(function(){

    $.extend($.expr[':'],{
        textboxEmpty: function(el){
            return ($(el).val() === "");
        }
    });
});

And then access them like this:

alert($('input.required:textboxEmpty').length); //alerts the number of input boxes in your selection

So you could put a .each on them:

$('input.required:textboxEmpty').each(function(){
    //do stuff
});

answered Aug 13, 2010 at 13:45

Mutation Person

30.6k18 gold badges102 silver badges166 bronze badges

Collectives™ on Stack Overflow

jQuery - Find any input with a given class that has no value

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related