如果表單字段為空，如何添加類（或更改表單字段的類）？ 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);
  }
});

我怎樣才能做到這一點？ 這是小提琴。

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");    
    }); 


});

小提琴演示

---

Fyi：HTML5附帶了一堆偽類來檢查無效的表單輸入，因此您不必自己編寫代碼，如果有興趣的話，請看這里 。

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);
    }
});

演示版