忽略隐藏在验证中的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")); 
       } 
    }); 
});