jQuery défaut de priorité message d'erreur de validation d'affichage (Css) Popup/info-bulle comme

j'utilise jQuery BeautyTips pour atteindre le peu d'effet des bulles dont vous parlez. Je n'utilise pas le plugin de Validation donc je ne peux pas vraiment aider beaucoup là, mais il est très facile de style et de montrer les BeautyTips. Vous devriez regarder. Ce n'est pas aussi simple que les règles CSS, je le crains, car vous devez utiliser l'élément canvas et inclure un fichier javascript supplémentaire pour IE pour jouer agréable avec elle.

quelques choses:

tout d'abord, je ne pense pas que vous ayez vraiment besoin d'une erreur de validation pour un fieldset radio parce que vous pourriez juste faire vérifier un des champs par défaut. La plupart des gens préféreraient corriger quelque chose et fournir quelque chose. Par exemple:

   Age: (*) 12 - 18 | () 19 - 30 | 31 - 50 

est plus susceptible d'être changé à la bonne réponse que la personne ne veut pas qu'elle aille à la valeur par défaut. S'ils le voient vide, ils sont plus susceptibles de penser " aucune de vos affaires" et l'ignorer.

Deuxièmement, j'ai pu obtenir l'effet que je pense que vous voulez sans aucune propriété de positionnement. Vous ajoutez simplement le rembourrage-droit au formulaire (ou à la div du formulaire, peu importe) pour fournir assez d'espace pour votre erreur et assurez-vous que votre erreur tiendra dans cette zone. Ensuite, vous avez une classe CSS prédéfinie appelée "error" et vous la définissez comme ayant une marge négative-haut à peu près la hauteur de votre champ d'entrée et une marge - gauche à peu près la distance de la gauche à où ton rembourrage-à droite devrait commencer. J'ai essayé, ce n'est pas grand, mais il fonctionne avec trois propriétés et ne nécessite pas de flotteurs ou absolues:

   <style type="text/css">
    .error {
        width: 13em; /* Ensures that the div won't exceed right padding of form */
        margin-top: -1.5em;  /*Moves the div up to the same level as input */
        margin-left: 11em;   /*Moves div to the right */
        font-size: .9em;     /*Makes sure that the error div is smaller than input */
    }

   <form>
   <label for="name">Name:</label><input id="name" type="textbox" />
   <div class="error"><<< This field is required!</div>
   <label for="numb">Phone:</label><input id="numb" type="textbox" />
   <div class="error"><<< This field is required!</div>
   </form>

malheureusement je ne peux pas commenter avec ma réputation d'internaute novice, mais j'ai une solution pour la question de l'écran vide, ou du moins c'est ce qui a fonctionné pour moi. Au lieu de définir la classe wrapper à l'intérieur de la fonction errorPlacement, définissez-la immédiatement lorsque vous définissez le type de wrapper.

$('#myForm').validate({
    errorElement: "div",
    wrapper: "div class=\"message\"",
    errorPlacement: function(error, element) {
        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() + 5);
        error.css('top', offset.top - 3);
    }

});

je suppose que le faire de cette façon permet au validateur de savoir quels éléments div supprimer, au lieu de tous. Ça a marché pour moi, mais je ne sais pas vraiment pourquoi, donc si quelqu'un pouvait élaborer ça pourrait aider les autres une tonne.

Cette réponse m'a vraiment aidé, dans mon cas, j'ai eu à filtrer certains éléments et des aligment sur leur erreur div,

errorPlacement:function(error,element) {
    if (element.attr("id") == "special_element") {
        // special align
    } else { // default error scheme
        error.insertAfter(element);
    }
}

ajouter les css suivants à votre .valider la méthode pour modifier le css ou de la fonctionnalité

 errorElement: "div",
    wrapper: "div",
    errorPlacement: function(error, element) {
        offset = element.offset();
        error.insertAfter(element)
        error.css('color','red');
    }

Si vous pouvez fournir une raison pour laquelle vous avez besoin de remplacer l'étiquette avec un div, ce serait certainement aider...

aussi, pouvez-vous coller un échantillon qui serait utile ( http://dpaste.com / ou http://pastebin.com / )