如何添加類（或更改表單域的類），如果它是空的？ jQuery

Question

我有一個像下面的形式;

<form id="myform" name="myform"> 
    <input type="text" class="required" value="" name="qwer" /><br /> 
    <input type="text" value="" name="asdf" /><br /> 
    <input type="text" class="required" value="" name="zxcv" /><br /> 
    <input type="text" value="" name="tyui" /><br /> 
    <input type="text" class="required" value="" name="ghjk" /><br /> 
    <input type="submit" value="Submit" /> 
</form> 

我要檢查是否有class="required"文本字段爲空或不提交的時間。如果它們是空白的，我想將相應的空白字段的類更改爲error。如果所有必填字段都不爲空，我想提醒序列化數據。我試過這個;

$('#myform input[type=submit]').click(function(e){ 
    e.preventDefault(); 
    var data = $('#myform').serialize(); 
    if($.trim($('#myform input[type=text].required').val()).length == 0){ 
    $(this).addClass("error"); 
    }else{ 
    alert(data); 
    } 
}); 

我該怎麼做？ Here是小提琴。

在此先感謝... :)

Answer 1

你應該遍歷與required類的每一個元素。 由於您使用$(this).addClass()，因此您在提交按鈕上設置錯誤類，$(this)是對提交按鈕的引用。

$('#myform input[type=submit]').click(function(e){ 
    e.preventDefault(); 
    var data = $('#myform').serialize(); 

    [].slice.call($('#myform input[type=text].required')).forEach(function (elem, index) { 
     $elem = $(elem); 
     if($elem.val().length == 0) 
      $elem.addClass("error");  
    }); 


}); 

Fiddle demo

---

據透露：HTML5配備了一堆僞類以檢查是否存在無效的表單輸入，這樣你就不必自己編寫它，看看here，如果你'感興趣。

Answer 2

上輸入

去除不需要value=""後，你可以這樣做：

$('#myform input[type=submit]').click(function (e) { 
    e.preventDefault(); 
    var data = $('#myform').serialize(); 
    if ($('.required').is('[value=""]')) { 
     $('.required[value=""]').addClass("error"); 
    } else { 
     alert(data); 
    } 
}); 

Demo