Geek asks and answers

Check if input field is empty in fields with jQuery

I have a form with 5 fields with the class "required"

I try to make sure that when sending these fields arent empty, if there are any, 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;
    };
});
+5
source share
5 answers

Try:

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

Try the following:

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

The class is erroradded only to empty fields and is deleted otherwise.

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

Another variation that may be useful for your task: an additional check for blurring fields:

$('.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/

+1
source

if($('.required') jQuery, .val() .

- (EDIT: , expr ):

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

, . submit , . , ,

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

, , :

, : http://jsfiddle.net/LREAh/

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

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

, attr('placeholder', 'You forgot this one'); addClass('error'); - . id="formX" html btw, - .

0

More articles:


All Articles