Question

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

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

$('.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()的调用将仅使用该集合的第一个元素来执行测试。

尝试这样的事情（编辑：不需要做循环或测试，因为过滤器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'); - 仅用于演示。你不需要html btw上的id="formX"，我只是尝试别的东西而忘了删除。

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

5 个答案: