使用jQuery检查输入字段是否为空

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

我有一个包含5个字段的表单，所有字段都包含“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.

我试图确保在提交这些字段时不是空的，如果是空的，添加一个类，如果不是，返回true——我尝试了下面的方法，但没有成功，即使字段是空的，表单仍然提交。

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

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

5 个解决方案

#1

Try:

试一试:

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

#2

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/

#3

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.

如果($('.required')将返回一个jQuery对象集合，而调用.val()将只使用该集合的第一个元素来执行测试。

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

试试这样的方法(编辑:不需要做循环或测试，因为filter expr会帮你处理):

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

#4

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

您应该使用filter来获取空字段。表单提交也更适合使用，以便它也能处理enter key press。如果不是，则必须处理表单内部的enter键按下，它将触发表单的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;
    }
});

#5

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/

替换所有未填充的必需字段: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/

只替换提交表单的必需字段: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.

当然你可以改变attr('placeholder'， ' you forgot this one');最好选择用addClass(替代为“错误”);这只是为了作示范。顺便说一句，在html中不需要id="formX"，我只是在尝试其他东西，但忘记了删除。

#1