忽略隱藏在驗證中的div

Question

我有一個文件.jsp，並根據select的值顯示/隱藏div。

如果我選擇的值是「no」隱藏DIV，如果是「是」，顯示在div

我用NG-要求是否需要驗證的參數。

但是，如果值爲「否」並且我驗證了我的表單，我無法驗證它，因爲div隱藏的字段爲空。

我測試了一些東西，但沒有結果。

CODE

<div class="row" id="yesAuth"> 
    <div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendUsername, 'has-success': valid.basicAuthForBackendUsername}"> 
     <div class="form-group" > 
      <label for="basicAuthForBackendUsername">basic auth username *</label> 
      <input type="text" name="basicAuthForBackendUsername" class="form-control" placeholder="basic auth username" ng-model="api.basicAuthForBackendUsername" ng-required="true"> 
      <span id="helpBlock" class="help-block" ng-show="help.basicAuthForBackendUsername.required">basic auth username is required.</span>  
     </div>         
    </div> 
</div> 

JS

$(function() { 
     $("#basicAuth").change(function() { 
     if($("#basicAuth option:selected").val() == 'yes'){ 
      $('#yesAuth').show(); 
     } 
     else{ 
      $('#yesAuth').hide(); 
     } 
     }); 
    }); 

$("#basicAuth").validate({ 
    ignore: ".hidden" 
}); 

<style media="screen" type ="text/css"> 
    .hidden { 
     visibility: hidden; 
    } 
</style> 

CSS我怎樣才能解決我的問題？

非常感謝。

Answer 1

請使用角度驗證並使用ng-if來顯示並隱藏div。 在角度情況下，您不需要使用JS代碼。

你可以輕鬆地在角採用NG-IF =「設置你調理這裏」

和驗證將無法正常工作時，元素是隱藏（不顯示在DOM）

Answer 2

您需要使用.removeAttribute()時當你顯示它時（隱藏舊的香草JavaScript），你隱藏了元素和.setAttribute()。

$(function() { 
     $("#basicAuth").change(function() { 
     if($("#basicAuth option:selected").val() == 'yes'){ 
      $('#yesAuth').show(); 
      $('#basicAuthForBackendUsername').setAttribute("ng-required", "true"); 
     } 
     else{ 
      $('#yesAuth').hide(); 
      $('#basicAuthForBackendUsername').removeAttribute("ng-required"); 
     } 
     }); 
    }); 

我不熟悉AngularJS，所以如果我錯了，請糾正我。

Answer 3

我測試類似的東西，但現在如果值是「是」，驗證我的形式沒有被選中的領域，而它是空的..

$(function() { 
    $('#yesAuth').hide(); 
    $("#basicAuth").change(function() { 
       if($("#basicAuth option:selected").val() == 'yes'){ 
          $('#yesAuth').show(); 
          $('#basicAuthForBackendUsername').attr("ng-required","true"); 
          $('#basicAuthForBackendPassword').attr("ng-required","true"); 
          alert("VOILA" + $('#basicAuthForBackendPassword').attr("ng-required")) 

       } 
       else{ 
          $('#yesAuth').hide(); 
          $('#basicAuthForBackendUsername').attr("ng-required","false"); 
          $('#basicAuthForBackendPassword').attr("ng-required","false"); 
          alert("VOILA" + $('#basicAuthForBackendPassword').attr("ng-required")); 
       } 
    }); 
});