jQuery Valider une entrée masquée uniquement si un autre champ a une valeur

Question

J'ai un formulaire et j'ai un problème pour obtenir une entrée cachée uniquement pour valider si le champ de mot de passe a été entré.

<div class="form-group"> 
    <label for="password" class="control-label col-sm-4">Password: </label> 
    <div class="col-lg-6"> 
     <input type="password" placeholder="Your Password" id="password" name="password" class="form-control" autocomplete="off"> 
    </div> 
</div> 

<div class="form-group"> 
    <label class="control-label col-sm-4">Password Strength</label> 
    <div class="col-sm-6" id="password-meter"> 
     <div class="progress"> 
      <div class="progress-bar" id="password-meter-progress"></div> 
      <input type="hidden" name="password_strength" id="password_strength"> 
     </div> 
    </div> 
</div> 

<div class="form-group"> 
    <label for="confirm_password" class="control-label col-sm-4">Confirm Password: </label> 
    <div class="col-lg-6"> 
     <input type="password" placeholder="Confirm Password" id="confirm_password" name="confirm_password" class="form-control" autocomplete="off"> 
    </div> 
</div> 

Si je clique sur un bouton comme celui-ci, il ne fait rien. J'ai essayé de vous déconnecter v.errorList mais ne vois rien là

$('#button').click(function() { 
    if (v.form()) { 
     $('.frm').hide('fast'); 
     $('#sf2').show('slow'); 
    } 
}); 

Voici mon code validate

function isPasswordPresent() { 
    return $('#password').val() !== ''; 
} 
var v = $('#onboardingform').validate({ 
    ignore: [], 
    rules: { 
     password: { 
      required: true, 
      minlength: 6, 
     }, 
     confirm_password: { 
      required: true, 
      minlength: 6, 
      equalTo: "#password", 
     }, 
     password_strength: { 
      min: { 
       depends: isPasswordPresent, 
       param: 60 
      } 
     } 
    }, 
    messages: { 
     password_strength: { 
      min: 'Enter a strong password' 
     } 
    }, 
    errorElement: "span", 
    errorClass: "help-inline", 
}); 

Answer 1

Citation comment:

«J'ai trouvé le problème est avec ignore: [], .Si je retire que le formulaire valide bien, mais ma règle dépendante ne fonctionne plus "

Cela n'a aucun sens. ignore: [] signifie simplement ignorer rien; valider tous les champs, y compris tous les champs cachés. Comme votre titre l'indique, si vous souhaitez valider un champ masqué, vous devez définir l'option ignore en conséquence, par exemple [].

---

De même, il n'est pas nécessaire d'écrire une fonction externe pour tester si un champ contient une valeur. Le plugin fournit des sélecteurs :filled et :blank pour cela.

Utilisez $('#password').is(':filled') pour voir si elle est remplie, ou vous pouvez utiliser !$('#password').is(':blank') pour vous assurer que ce n'est pas vide.

password_strength: { 
    min: { 
     depends: function(element) { 
      return $('#password').is(':filled'); 
      // return !$('#password').is(':blank'); 
     }, 
     param: 60 
    } 
} 

Voir: jqueryvalidation.org/category/selectors/

Preuve de concept démo: jsfiddle.net/g6hq8o7y/