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

Fyi：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

如果表单字段为空，如何将类添加到（或更改类）？ jQuery的

2 个答案: