Erreur de validation Jquery (boutons radio)

Je suis en train d'utiliser le plugin Jquery validation pour valider mon formulaire. J'ai des messages d'erreur apparaissant à la droite de la plupart de mes éléments d'entrée, mais les boutons radio sont de me donner rien que des ennuis.

Si je ne donne pas une largeur de la div.groupe classe, le message d'erreur s'affiche sur l'extérieur de la pleine page (car je suppose que le div de largeur est de 100% de la page?) Ne rien faire provoque le message d'erreur s'affiche après le premier bouton radio à la place de la 2ème. Je ne peux pas coder en dur une largeur, puisque je veux l'utiliser sur des groupes de radio de plusieurs largeurs. Comment puis-je la faire apparaître sur le bord droit de où les boutons de la radio dans la Radio, les boutons se termine?

Merci!

var validator = $("#myForm").validate({
        errorElement: "div",
        wrapper: "div",  //a wrapper around the error message
        errorPlacement: function(error, element) {

            if (element.parent().hasClass('group')){
                element = element.parent();
            }


            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');  //add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
            error.css('top', offset.top);
    }
});

Et puis

<p>
    <div class="group">
        <label>Gender</label>
        Male: <input id="gender_male" type="radio" name="gender" class="required" value="Male" />
        Female: <input id="gender_female" type="radio" name="gender" class="required" value="Female"  />
    </div>

Peut-être juste un moyen d'avoir le message d'erreur s'affiche après le dernier bouton radio dans le groupe? Si je pouvais obtenir un handle vers le dernier élément, j'ai pu changer le décalage en conséquence.

EDIT: Ah, j'ai simplement utilisé div.le groupe{display:inline-block;}.

source d'informationauteur Jordan

  1. 34

    Vous pouvez également utiliser cette méthode pour placer une erreur pour un domaine spécifique où vous le souhaitez. 

    errorPlacement: function(error, element) {
  if (element.attr("name") == "PhoneFirst" || element.attr("name") == "PhoneMiddle" || element.attr("name") == "PhoneLast") {
     error.insertAfter("#requestorPhoneLast");
  } else {
     error.insertAfter(element);
  }
},
  2. 17

    N'avez même pas besoin de JS errorPlacement de le faire... si il suffit de placer une étiquette pour les boutons radio fonctionne également comme suit: 

    <label class="label_radio" for="answer_A">
  <input id="answer_A" name="answers[question1].choiceArray" type="radio" value="A"/>Yes
</label>
<label class="label_radio" for="answer_B">
  <input id="answer_B" name="answers[question1].choiceArray" type="radio" value="B"/>No
</label>

<label for="answers[question1].choiceArray" class="error" style="display:none;">* Please pick an option above</label>

    Jquery Validation plugin va automatiquement afficher et afficher le "nécessaire" message vocal.

  3. 1

    De l'essayer. Il met l'erreur avant que l'objet de l'erreur est générée. Si vous définissez la première case d'option en tant que de besoin, cette wil travail. Pour des raisons de cohérence, j'ai choisi d'effectuer cette action sur tous les inputtypes, mais vous pouvez également ajuster le script un peu pour effectuer cette action uniquement lorsqu'un groupe de boutons échec de la validation.

    $('form').validate({
  errorPlacement:
  function(error, element){
    var id=element[0]['id'];
    $( element ).before( "<label for='"+id+"' class='error'>"+error.text()+"</label>" );
  }
});
  4. 1

    Suffit d'utiliser un peu de CSS:

    #myform div.group label.error {float:right;padding-left:10px;}