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:

1. Get input fields
2. Store them in array with each one's value
3. 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.

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:

1. Get input fields
2. Store them in array with each one's value
3. 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.

• javascript
• jquery
• validation
• arrays

• 2 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 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 Commented May 21, 2010 at 0:20
• I wrote something similar yesterday at ajgraham./2010/05/simple-but-powerful-jquery-form-validation/… if you want to pare approaches, there is a lot of crossover – 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 Commented May 21, 2010 at 0:32
• Thanks everyone for the ments! They have been very very helpful. I have now decided to use the $.each that jQuery provides and it works great. Thanks again. – Jannis Commented May 21, 2010 at 5:01

3 Answers 3

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

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.

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.