验证不适用于空字段

时间:2017-09-06 11:41:21

标签: jquery

我有5个输入字段,其中包含类hidden

<section class="hidden">
        <label>
        <input class="required" ng-model="currentData.name" /> 
         </label>     
</section>
<section>
        <label>
        <input  class="required" ng-model="currentData.id"/> 
        </label>   
</section>
<section>
    <label>
    <input class="required" type="text" ng-model='currentData.age'/>  
    </label>  
</section>
<section class="hidden">
    <label>
    <input class="required" ng-model='currentData.gender'/> 
    </label>
</section>
<section>
    <label>
    <input class="required" ng-model='currentData.description'/>
    </label>    
</section>

我正在对空字段进行验证,它的工作正常。

$form('input.required').each(function() {
            if ($this.val().trim() == '') {
                alert()
            }       
        })

现在我不想对父节元素具有hidden类的字段进行验证。这是我编写的代码。

$form.find('section').not(".hidden").closest('input.required').each(function() {
            if ($this.val().trim() == '') {
                alert()
            }       
        })

但我的问题是验证不适用于字段,即使它没有hidden类。 如果我删除.not()方法验证工作正常。这里有什么问题?

1 个答案:

答案 0 :(得分:1)

Closest要在父节点中进行选择,您可以使用find代替closest

$form.find('section').not(".hidden").find('input.required').each(function() {
    if ($this.val().trim() == '') {
       alert()
    }       
    });

请查看以下代码段以供参考。

&#13;
&#13;
$('.btn').click(function() {
  $('section').not('.hidden').find('input.required').each(function() {
    if ($(this).val().trim() == '') {
      alert()
    }
  })
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="hidden">
  <label>
    <input class="required" ng-model="currentData.name" />
  </label>
</section>
<section>
  <label>
    <input class="required" ng-model="currentData.id" />
  </label>
</section>
<section>
  <label>
    <input class="required" type="text" ng-model='currentData.age' />
  </label>
</section>
<section class="hidden">
  <label>
    <input class="required" ng-model='currentData.gender' />
  </label>
</section>
<section>
  <label>
    <input class="required" ng-model='currentData.description' />
  </label>
</section>

<input type="button" value="click" class="btn">
&#13;
&#13;
&#13;