CODEWITHSUNDEEP
javascriptjqueryhtml
Liam
Liam

Reputation: 9855

Check if input field is empty on fields with jQuery

I have a form with 5 fields all with the class 'required'

Im trying to ensure that on submit these fields arent empty, if they are, add a class, if not, return true - ive tried the following only with no luck, even if the fields are empty the form still submits.

$('.submit').click(function(){

if($('.required').val() == "") {
        $('.required').addClass('error');
        return false;
    } else {
        return true;
    };
});

Upvotes: 5

Views: 5956

Answers (5)

Alex
Alex

Reputation: 1454

A little late to the party but I think this is the best solution:

Replace ALL required fields that weren't filled: http://jsfiddle.net/LREAh/

$('form').submit(function(){
if(!$('.required').val()) {
    $('.required').attr('placeholder', 'You forgot this one');
    return false;
    } else {
        return true;
};
});

Replace only the required field of the submitted form: http://jsfiddle.net/MGf9g/

$('form').submit(function(){
if(!$(this).find('.required').val()) {
    $(this).find('.required').attr('placeholder', 'You forgot this one');
    return false;
} else {
    return true;
}
});

Of course you can change attr('placeholder', 'You forgot this one'); for addClass('error'); -- it was only for demonstration. You don't need the id="formX" on the html btw, I was just trying something else out and forgot to remove.

Upvotes: 0

wirey00
wirey00

Reputation: 33661

You should use filter to get the empty fields. The form submit is also better to use so that it will handle enter key presses too. If not then you will have to handle the enter key presses inside the form that will trigger the submit event of the form

$('yourform').submit(function(){
    // empty will contain all elements that have empty value
    var empty = $('.required').filter(function(){
        return $.trim(this.value).length === 0;
    });
    if(empty.length){
       empty.addClass('error');
       return false;
    }
});

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Try this:

$('.submit').click(function() {
    $('.required').removeClass('error').filter(function() {
        return !$.trim(this.value).length;
    }).addClass('error');
});

Class error is added to empty fields only and is removed otherwise.

http://jsfiddle.net/dfsq/2HxaF/

Another variation which can be useful for your task: additional validation on fields blur:

$('.submit').click(validate);
$(document).on('blur', '.required', function() {
    validate($(this));
});

function validate($field) {
    ($field instanceof jQuery && $field || $('.required')).removeClass('error').filter(function() {
        return !$.trim(this.value).length;
    }).addClass('error');
}

http://jsfiddle.net/dfsq/2HxaF/1/

Upvotes: 1

Josh E
Josh E

Reputation: 7434

if($('.required') will return a collection of jQuery objects, while the call to .val() will only use the first element of that collection to perform your test.

try something like this (EDIT: don't need to do a loop or test, since filter expr will take care of that for you):

$('.submit').click(function(e) {
    var ins = $('input.required[value=""]');         
        ins.addClass('error');
        return false;
   }
    return true;
 }

Upvotes: 0

Anujith
Anujith

Reputation: 9370

Try:

$('.submit').click(function(e){
 if(!$('.required').val()) {
    $('.required').addClass('error');
    e.preventDefault();
  } else {
    return true;
  };
});

Upvotes: 4

Related Questions