驗證工作不空田

Question

我有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> 

我做驗證空字段，它的工作好5個輸入字段。

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

現在我不想爲此父節元素具有hidden class.This領域做驗證是我寫的代碼。

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

但我的問題是驗證不工作的領域，即使它沒有hidden類。 如果我刪除.not()方法驗證正在工作。這裏的問題是什麼？

Answer 1

Closest要在父節點中選擇，您應該使用find而不是closest。

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

查看下面的代碼片段以供參考。

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

<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">