Ignorer div cachée à la validation

Bonjour à tous,

J'ai un fichier .jsp avec une div que je show/hide en fonction d'une valeur d'un select

Si la valeur de mon select est "no" hide la div et si "yes" show la div

J'utilise ng-required si un paramètre est requis pour la validation.

Mais si la valeur est "no" et que je valide mon formulaire, je ne peux pas parce que le champ dans la div cachée est vide

J'ai quand même testé quelque chose.

CODE

Code:

1
2
3
4
5
6
7
8
9
<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>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function () {
      $("#basicAuth").change(function () {
      if($("#basicAuth option:selected").val() == 'yes'){
          $('#yesAuth').show();
      }
      else{
          $('#yesAuth').hide();
      }
      });
   });
 
$("#basicAuth").validate({
     ignore: ".hidden"
});

CSS

Code:

1
2
3
.hidden {
       visibility: hidden;
}

Comment puis-je fixer ce problème?

Merci à vous.