jQuery: How to check if a value exists in an array?

Question

I am trying to write a simple input field validation plugin at the moment (more of a learning exercise really) and thought this would not be too hard, seeing as all I should have to do is:

Get input fields
Store them in array with each one's value
On submit of form check if array contains any empty strings

But I seem to fail at writing something that checks for an empty string (read: input with no text inside) inside my array.

Here is the code I have so far:

var form = $(this), // passed in form element
    inputs = form.find('input'), // all of this forms input fields
    isValid = false; // initially set the form to not be valid


function validate() {
    var fields = inputs.serializeArray(); // make an array out of input fields

    // start -- this does not work
    for (var n in fields) {
        if (fields[n].value == "") {
            isValid = false;
            console.log('failed');
        } else {
            isValid = true;
            console.log('passed');
        };
    }
    // end -- this does not work

}; // close validate()

// TRIGGERS
inputs.live('keyup blur', function(event) {
    validate();
});

Any help with how I can check if one of the fields is blank and if so return a isValid = false would be much appreciated.

I also played around with the $.inArray("", fields) but this would never return 0 or 1 even when the console.log showed that the fields had no value.

Thanks for reading.

Just as a side observation, is it necessary to look over all input fields when any of them change? Wouldn't you only want to re-validate the input that changed? Also you probably want :input instead of input for your selector, if you want to include <select> and <textarea>. — Nick Craver
– Nick Craver, Commented May 21, 2010 at 0:19
If you're using jQuery, scour the API and see what shortcuts you can use. Instead of using a for..in loop, you can use $.each. Instead of variable.value you can use $(variable).val(). Basically, use jQuery or get rid of it, because otherwise the readability of the code drops drastically if you're switching between straight JS and jQuery JS. (You'll thank yourself in the end, I promise.) — Jeff Rupert
– Jeff Rupert, Commented May 21, 2010 at 0:20
I wrote something similar yesterday at ajgraham.com/2010/05/simple-but-powerful-jquery-form-validation/… if you want to compare approaches, there is a lot of crossover — Alex
– Alex, Commented May 21, 2010 at 0:31
for..in is a bad idea. It is used to enumerate an object's properties. A regular for loop should be used instead to iterate array values, or the $.each that jquery provides. — Anurag
– Anurag, Commented May 21, 2010 at 0:32
Thanks everyone for the comments! They have been very very helpful. I have now decided to use the $.each that jQuery provides and it works great. Thanks again. — Jannis
– Jannis, Commented May 21, 2010 at 5:01

uhleeka · Accepted Answer · 2010-05-21 00:32:43Z

4

If you are looking for a more-jQuery style syntax, you could replace your for loop using:

var isValid = true;  // default to valid

$.each(fields, function(i, field){
    if(field.value == '') {
        console.log('failed');   
        isValid = false; 
    } else {
        console.log('passed');
    }
});

answered May 21, 2010 at 0:32

uhleeka

6888 silver badges19 bronze badges

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

Comments

Alec · Accepted Answer · 2010-05-21 00:20:26Z

4

If the first field is empty, and the second isn't, you'll overwrite the isValid variable that way. You can break; the for loop once you get the first empty variable.

answered May 21, 2010 at 0:20

Alec

9,1089 gold badges41 silver badges43 bronze badges

2 Comments

karim79 Over a year ago

Great answer. Makes perfect sense.

Jannis Over a year ago

Made it work just like I wanted. Thanks. Ultimately however I feel like the $.each approach is probably the better one seeing as this is a jQuery "plugin". Thanks though, definitely learned a lot.

Kent · Accepted Answer · 2010-05-21 06:29:49Z

0

You could replace the whole validate function with a bit of a simpler check:

function validate() {
    var blankInputs = inputs.filter(function() {
        return this.value === ''; 
    });

    isValid = blankInputs.length === 0; // If there are none, the form is valid

} // close validate()

Please note the use of the strict equality operator, ===. It is good practice to pretty much always use this instead of ==, but this is especially the case for values that act falsy (evaluate to false when you say if (value)). == can give you some very unexpected behavior in these cases.

answered May 21, 2010 at 6:29

Kent

4692 silver badges5 bronze badges

Collectives™ on Stack Overflow

jQuery: How to check if a value exists in an array?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related