javascript - 使用 jQuery 检查字段上的输入字段是否为空

Question

我有一个包含 5 个字段的表单，所有字段均为“必需”类

我试图确保在提交时这些字段不为空，如果是，则添加一个类，如果不是，则返回 true - 我尝试了以下操作，但没有运气，即使字段为空，表单仍会提交。

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

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

Answer 1

尝试：

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

Answer 2

尝试这个：

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

类error仅添加到空字段，否则将被删除。

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

另一个对您的任务有用的变体：对字段模糊的附加验证：

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

Answer 3

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

尝试这样的事情（编辑：不需要做循环或测试，因为 filter expr 会为你处理）：

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

Answer 4

您应该使用过滤器来获取空字段。表单提交也更好用，这样它也可以处理输入按键。如果不是，那么您将不得不处理表单内的输入键，这将触发表单的提交事件

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

Answer 5

聚会有点晚了，但我认为这是最好的解决方案：

替换所有未填写的必填字段：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 上的，我只是在尝试别的东西，忘了删除。