jQuery Validation - erreur de placement

Je suis en train d'utiliser 'errorPlacement" de jQuery Validation DOCS:

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   },
   debug:true
 })

Je veux placer erreur avant pas d'entrée valide, mais cela ne fonctionne pas:

$("#myform").validate({
      errorPlacement: function(error, element) {
         error.appendTo( element.parent("form").prev("input") );
       },
       debug:true
     })

DÉMONSTRATION EN DIRECT

Toute aide appréciée!

  • quel est le balisage ressemble et où dans ce balisage voulez-vous de mettre l'erreur?
  • démonstration en direct a été ajoutée à la question
  • si vous souhaitez que le message d'erreur s'affiche au-dessus du texte de la boîte?
  • Oui, avant (en haut) donnée d'entrée.
InformationsquelleAutor Iladarsda | 2011-07-01
  1. 50

    Puisque vous voulez insérer le message d'erreur avant de l'élément non valide, utilisez insertBefore():

    errorPlacement: function(error, element) {
    error.insertBefore(element);
}
    • Hamidi Merci! Qui travaille! Près.. comme vous pouvez le voir dans mon exemple, il y a réellement deux de saisie de mot de passe(un pour onfocus effet et un réel), peut-on speficy que pour #nom d'utilisateur insertbefore(); et pour les #realpassword insertBefore('#le mot de passe') ??
    • Cela fonctionne correctement que pour des #mot de passe: errorPlacement: function(error, element) { if( $('label[for="realpassword"]') ){ error.insertBefore('#password'); } else if (('label[for="username"]')){ error.insertBefore('#username'); } }, Pourquoi??
    • il devrait fonctionner, mais le message d'erreur s'affiche toujours après la <input> élément dans mon navigateur. Le flottant parent <span> semble être le problème...
    • Hamidi - mais #nom d'utilisateur est en dehors de cela.. 😐 Même histoire sans <span>
    • si nous changeons l'ordre - les deux apparaissent sur le dessus de #l'utilisateur errorPlacement: function(error, element) { if ( $('label[for="username"]') ){ error.insertBefore('#username'); } else if( $('label[for="realpassword"]') ){ error.insertBefore('#password'); } },
    • près de tous vos éléments de style avec float: left; et display: inline-block;. Qui joue avec la mise en page. Est-il une raison pourquoi vous faites cela?
    • Triés! Flotteur de cos de ce soumettre btn.

    InformationsquelleAutor Frédéric Hamidi
  2. 17

    Il suffit de mettre la partie Où vous voulez l'erreur

    <label for="[your checkbox id]" generated="true" class="error"></label>

    Ex:

    <label><input type="checkbox" name="checkbox" id="checkbox" value="1" > Checkbox content</label>
<label for="checkbox" generated="true" class="error"></label>
    InformationsquelleAutor Tharaka Arachchige
  3. 2

    Une autre option est...

      errorPlacement: function (error, element) {
    element.before(error);
  }
    InformationsquelleAutor actionbin
  4. 1

    Je recommande d'utiliser un modèle html pour spécifier la position et le style de la sorte:

    <input name="patient_gender" required>
<label for="patient_gender" class="validation_error_message help-block"></label>

    et de la fonction de réécriture pour l'erreur de placement 

    $.validator.setDefaults({
    errorPlacement: function(error, element) {
        var name = element.attr('name');
        var errorSelector = '.validation_error_message[for="' + name + '"]';
        var $element = $(errorSelector);
        if ($element.length) { 
            $(errorSelector).html(error.html());
        } else {
            error.insertAfter(element);
        }
    }
});
    InformationsquelleAutor Yevgeniy Afanasyev