Afficher l'erreur sur les boutons radio

Question

Les documents du plugin Jquery Validation indiquent que vous pouvez valider qu'au moins un bouton radio est sélectionné. Cependant, lorsque j'essaye de le faire avec une mise en page supplémentaire, je ne reçois pas la surbrillance d'erreur.

Mon code ressemble à ceci.

<div class="form-group" style="margin-top:25px;"> 
    <label for="factorSelect" class="control-label col-sm-3">Please select a recovery method</label> 
    <div class="input-group"> 
     <span class="input-group-addon"> 
      <i class="glyphicon glyphicon-envelope"></i> 
     </span> 
     <div class="form-control" style="height:auto;"> 
      <div class="radio"> 
       <label class="noBold-text" style="font-size: 1em"> 
        <input id="factorSelect_email" name="factorSelect" type="radio" value="EMAIL" />Send me an email 
        <span class="cr"><i class="cr-icon fa fa-circle"></i></span> 
       </label> 
      </div> 
      <div class="radio"> 
       <label class="noBold-text" style="font-size: 1em"> 
        <input id="factorSelect_sms" name="factorSelect" type="radio" value="SMS" />Send an SMS to my phone 
        <span class="cr"><i class="cr-icon fa fa-circle"></i></span> 
       </label> 
      </div> 
     </div> 
    </div> 
</div> 

$("#forgotPasswordForm").validate({ 
    rules: { 
     fpUsername: { 
      required: true, 
      minlength: 3 
     }, 
     factorSelect: { 
      required: true 
     } 
    }, 
    messages: { 
     fpUsername: { 
      required: "Please enter your username or email", 
      minlength: "Your username must be at least {0} characters" 
     }, 
     factorSelect: { 
      required: "You must select a recovery method" 
     }, 
    }, 
    highlight: function (element, errorClass, validClass) { 
     $(element).parents(".form-group").addClass("has-error").removeClass("has-success"); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
     $(element).parents(".form-group").addClass("has-success").removeClass("has-error"); 
    }, 
}); 

La classe d'erreur has n'est jamais appliquée au groupe de boutons radio.

Answer 1

Je reproduit l'erreur que vous avez dans this CodePen ...

Le message d'erreur produit par jQuery Validation se positionne juste après l'élément non valide ... Quelle est la valeur par défaut.

Maintenant vous pouvez placer ce message d'erreur ailleurs, en utilisant errorPlacement. Dans ce Solution, je viens de le placer juste après le parent .input-group. Je suis sûr que c'est la pièce de puzzle que vous recherchez.
;)

errorPlacement: function(errorLabel, invalidElement){ 
    if($(invalidElement).is("[type='radio']")){ 
    var inputGroup = $(invalidElement).closest(".input-group"); 
    inputGroup.after(errorLabel); 
    } 
}, 

---

EDIT

Avec votre code complet, plus facile à travailler ...
;)

Le comportement par défaut d'un button dans un form est à soumettre (Reference, voir "type").
Donc, si le type est omis, c'est ce qu'il fait. La fonction .validate() n'est pas déclenchée par un button type="button".

Alors ...
Vous devez empêcher la valeur par défaut submit afin de valider en premier.
Ensuite, soumettez si le formulaire est valide.

Ceci est réalisé par .preventDault() et submitHandler

$("#forgotPasswordForm").on("submit",function(e){ 
    e.preventDefault(); // Prevents the default form submit (Have to validate first!) 
}) 
    .validate({ 

    // Skipping some lines here... 

    submitHandler: function(form) { 
    form.submit(); // Submits only if the form is valid 
    } 
}); 

Updated CodePen

Answer 2

Ok, le fixe. Merci pour l'aide ci-dessus avec le placement du message d'erreur. Ce n'était pas mon problème initial mais je suis arrivé une fois que j'ai eu l'erreur d'afficher du tout. Votre correctif fonctionne très bien.

Mon problème principal s'est avéré être un conflit CSS avec certains styles qui transforment les boutons radio en jolies icônes de polices. Le petit fragment qui masque les boutons radio par défaut provoque l'échec de la validation car il ne doit rechercher que les champs visibles. Je place la hauteur à zéro à la place et jusqu'à présent cela semble fonctionner.

.checkbox label input[type="checkbox"], 
.radio label input[type="radio"] { 
    /*display: none;*/ 
    height:0; 
}