使用jQuery檢查字段上的輸入字段是否為空

Question

我有一個包含5個字段的表單，所有字段都是'required'

我試圖確保提交這些字段不是空的，如果是，添加一個類，如果沒有，返回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') .val() 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'); for addClass('error'); - 它只是為了演示。 你不需要html btw上的id="formX" ，我只是嘗試了別的東西而忘了刪除。