Question

我正在设置一个包含几个字段的表单，我想在提交前验证，我只是检查输入字段是否为空我的问题是我的脚本绕过if测试并直接进入其他功能。

<div id="personalInfo" class="col-lg-6 col-lg-offset-3">
<div class="acc_info_q"> <a data-toggle="collapse" data-target="#personal_info"><i class="fa fa-plus"></i> Personal Information</a> 
  <span id="stats2" class="fieldStatus pull-right">
    <i class="fa"></i> &nbsp;</span></div>

    <div id="personal_info"> 
      <div class="col-sm-6 control-group">
          <input type="text" class="form-control" name="address" id="address" placeholder="Address">
        </div>
      <div class="col-sm-6 control-group">
          <input type="text" class="form-control" name="city" id="city" placeholder="City">
        </div>  
      <div class="clearfix"></div>
  <div class="text-center">
    <hr>
    <button type="button" value="next" class="next1">Next</button>
  </div>
    </div>
    <!-- end of collapsed -->
    </div>

这个表单有2个字段，点击后脚本应查看输入字段并检查值，如果现在为它添加一个fa-times类，否则它会添加一个fa-check类，问题是如果跳过了if和它直接进入其他地方的是JS代码

＆＃13;

$('.next1').click(function() {
  var value = $(this).parent().find("input").filter(function() {
    return this.value === "";
  });
  console.log("value.length" +value.length)
  if (value.length) {
    //At least one input is empty
    $('#stats2').find('i').addClass('fa-times');
  } else {
    $('#stats2').find("i").removeClass('fa-times').addClass('fa-check')
     
   
  }
});

＆＃13;

这是一个codepen我甚至添加了一个console.log，它在字段为空时返回0，它应该返回2

codepen

Answer 1

您应该使用id选择器而不是.parent()（在您的情况下为.text-center并且没有input元素）

var value = $('#personal_info').find("input").filter(function() {
    return this.value === "";
});

表单归档验证值返回空

1 个答案: