jQuery-檢查特定輸入是否為空值，並將類僅添加到這些輸入為空

Question

我的表單具有必填的輸入字段，我用組成的類名指出了這一點。 我有一段類似的代碼。 如果我專注於必需的輸入，然后按提交，則該輸入將變為紅色（如果為空）（我想要）。 但是，如果我專注於輸入，那么一次只能一次使用。

我的代碼如下：

function checkIfEmpty(){
    $('#register-form input.gv-form-required').blur(function(){
        if( !$(this).val()){
            $(this).parent().parent().addClass("has-error");
            return false;
        }else{
            return true;
        }
    });
}

我幾乎可以肯定的是， blur()方法不適合我的情況。 因此，請幫助一個男人在這里。

Answer 1

試試這個：您必須使用.each()來檢查表單中的每個輸入，並將removeClass置於else條件中。

function checkIfEmpty(){
    var empty = false;
    $('#register-form input.gv-form-required').each(function(){
        if($(this).val().trim()==""){
            empty = true;
            $(this).parent().parent().addClass("has-error");
        }else{
            $(this).parent().parent().removeClass("has-error");
        }
    });
    return empty;
}

Answer 2

在您的情況下， blur事件確實似乎不正確。 我要做的是，我會遍歷每個字段並檢查它是否被填充。 如果是，請刪除（如果有） has-error類。 如果未填充，則為它has-error類

function checkIfEmpty(){
    $('#register-form input.gv-form-required').each(function(){
        if($(this).val() === ""){
            $(this).parent().parent().addClass("has-error");
        }else{
            $(this).parent().parent().removeClass("has-error");
        }
    });
}

Answer 3

將您的代碼更改為以下內容：

function checkIfEmpty(){
   $('#register-form input.gv-form-required').each(function(){
       if( !$(this).is(':empty')){
           $(this).parent().parent().addClass("has-error");
       }else{
           $(this).parent().parent().removeClass("has-error");
       }
   });
}

Answer 4

嘗試其他條件

$(this).parent().parent().removeClass("has-error");

js代碼

      if( !$(this).val()){
            $(this).parent().parent().addClass("has-error");

        }else{
            $(this).parent().parent().removeClass("has-error");

        }