忽略验证

Question

我有一个带有div的文件.jsp，我根据select的值显示/隐藏。

如果我的选择值是＆＃34;否＆＃34;隐藏div，如果是＆＃34;是＆＃34;显示div

如果验证需要参数，我使用 ng-required 。

但如果价值是＆＃34;否＆＃34;并且我验证了我的表单，我无法验证它，因为隐藏的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"
});

CSS

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

如何解决问题？

非常感谢。

Answer 1

请使用角度验证并使用ng-if进行显示并隐藏div。 如果有角度，您不需要使用JS代码。

你可以轻松地使用ng-if =＆＃34;在这里设置条件＆＃34;

当元素隐藏（不在DOM上显示）时，验证将不起作用

Answer 2

隐藏元素时需要使用.removeAttribute()，显示元素时需要使用.setAttribute()（来自普通的旧版香草JavaScript）。

$(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

我测试类似的东西，但现在如果值为＆＃34;是＆＃34;并且我验证了我的表单，该字段未被检查，而它是空的..

$(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"));
                }
     });
});