69 votes

jQuery override default validation error message display (Css) Popup/Tooltip like

J'essaie de remplacer l'étiquette du message d'erreur par défaut par un div au lieu d'une étiquette. J'ai regardé ce poste et je sais comment le faire, mais mes limites avec CSS me hantent. Comment puis-je l'afficher comme certains de ces exemples ?

Exemple #1 (Dojo) - Il faut taper une entrée invalide pour que l'erreur s'affiche
Exemple n° 2

Voici un exemple de code qui remplace l'étiquette d'erreur par un élément div.

$(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    "elem.1": {
                        required: true,
                        digits: true
                    },
                    "elem.2": {
                        required: true
                    }
                },
                errorElement: "div"
            });                  
        });

Maintenant, je suis un peu perdu sur la partie css mais voilà :

div.error {
        position:absolute;
        margin-top:-21px;
     margin-left:150px;
     border:2px solid #C0C097;
        background-color:#fff;
        color:white;
        padding:3px;
        text-align:left;
        z-index:1;
        color:#333333;
     font:100% arial,helvetica,clean,sans-serif;
     font-size:15px;
     font-weight:bold;  
    }

UPDATE :

Ok, j'utilise ce code maintenant mais l'image et le placement sur le popup est plus grand que la bordure, est-ce que cela peut être ajusté pour être dynamique en hauteur ?

if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
   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 - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox
} else {
   // Error placement for single elements
   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 - (element.height() / 2));
}

le css est le même que ci-dessous (votre code css)

Html

<span>
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</span>

185voto

Nadia Alramli Points 40381

Vous pouvez utiliser le errorPlacement pour remplacer l'affichage du message d'erreur avec peu de css. Car le css seul ne suffira pas à produire l'effet recherché.

$(document).ready(function(){
    $("#myForm").validate({
        rules: {
            "elem.1": {
                required: true,
                digits: true
            },
            "elem.2": {
                required: true
            }
        },
        errorElement: "div",
        wrapper: "div",  // a wrapper around the error 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());
            error.css('top', offset.top);
        }

    });
});

Vous pouvez jouer avec les attributs css left et top pour afficher le message d'erreur en haut, à gauche, à droite ou en bas de l'élément. Par exemple, pour afficher l'erreur en haut :

    errorPlacement: function(error, element) {
        element.before(error);
        offset = element.offset();
        error.css('left', offset.left);
        error.css('top', offset.top - element.outerHeight());
    }

Et ainsi de suite. Vous pouvez vous référer à Documentation de jQuery sur les css pour plus d'options.

Voici le css que j'ai utilisé. Le résultat ressemble exactement à celui que vous voulez. Avec aussi peu de CSS que possible :

div.message{
    background: transparent url(msg_arrow.gif) no-repeat scroll left center;
    padding-left: 7px;
}

div.error{
    background-color:#F3E6E6;
    border-color: #924949;
    border-style: solid solid solid none;
    border-width: 2px;
    padding: 5px;
}

Et voici l'image de fond dont vous avez besoin :

alt text
(source : <a href="http://sandbox.scriptiny.com/messages/images/msg_arrow.gif" rel="nofollow noreferrer">scriptiny.com </a>)

Si vous souhaitez que le message d'erreur s'affiche après un groupe d'options ou de champs. Regroupez alors tous ces éléments dans un conteneur, un 'div' ou un 'fieldset'. Ajoutez une classe spéciale à tous ces éléments, par exemple "group". Et ajoutez ce qui suit au début de la fonction errorPlacement :

errorPlacement: function(error, element) {
    if (element.hasClass('group')){
        element = element.parent();
    }
    ...// continue as previously explained

Si vous souhaitez uniquement traiter des cas spécifiques, vous pouvez utiliser attr à la place :

if (element.attr('type') == 'radio'){
    element = element.parent();
}

Cela devrait suffire pour que le message d'erreur s'affiche à côté de l'élément parent.

Vous devrez peut-être modifier la largeur de l'élément parent pour qu'elle soit inférieure à 100 %.


J'ai essayé votre code et il fonctionne parfaitement bien pour moi. Voici un aperçu : alt text

J'ai juste fait un tout petit ajustement au remplissage du message pour qu'il rentre dans la ligne :

div.error {
    padding: 2px 5px;
}

Vous pouvez modifier ces chiffres pour augmenter/diminuer le remplissage en haut/en bas ou à gauche/à droite. Vous pouvez également ajouter une hauteur et une largeur au message d'erreur. Si vous rencontrez toujours des problèmes, essayez de remplacer le span par un div.

<div class="group">
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</div>

Et ensuite, donnez une largeur au conteneur (ceci est très important)

div.group {
    width: 50px; /* or any other value */
}

A propos de la page blanche. Comme je l'ai dit, j'ai essayé votre code et il fonctionne pour moi. Il se peut que ce soit quelque chose d'autre dans votre code qui cause le problème.

3voto

Paolo Bergantino Points 199336

J'utilise jQuery BeautyTips pour obtenir l'effet de petite bulle dont vous parlez. Je n'utilise pas le plugin Validation, donc je ne peux pas vraiment vous aider, mais il est très facile de styliser et d'afficher les BeautyTips. Vous devriez y réfléchir. Ce n'est pas aussi simple que de simples règles CSS, j'en ai peur, car vous devez utiliser l'élément canvas et inclure un fichier javascript supplémentaire pour qu'IE joue le jeu avec lui.

2voto

Malheureusement, je ne peux pas commenter avec ma réputation de débutant, mais j'ai une solution pour le problème de l'écran vide, ou du moins c'est ce qui a fonctionné pour moi. Au lieu de définir la classe du wrapper dans la fonction errorPlacement, définissez-la immédiatement lorsque vous définissez le type du 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 cette façon de procéder permet au validateur de savoir quels éléments div il doit supprimer, au lieu de tous les supprimer. Cela a fonctionné pour moi, mais je ne sais pas vraiment pourquoi, donc si quelqu'un pouvait développer, cela pourrait aider les autres.

2voto

Anthony Points 14424

Quelques trucs :

Tout d'abord, je ne pense pas que vous ayez vraiment besoin d'une erreur de validation pour un ensemble de champs radio, car vous pourriez simplement avoir un des champs coché par défaut. La plupart des gens préfèrent corriger quelque chose plutôt que de fournir quelque chose. Par exemple :

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

a plus de chances d'être modifié en faveur de la bonne réponse, car la personne ne veut pas qu'il s'agisse de la réponse par défaut. S'il voit un champ vide, il est plus probable qu'il se dise "ça ne vous regarde pas" et qu'il passe son tour.

Deuxièmement, j'ai pu obtenir l'effet que je pense que vous recherchez sans aucune propriété de positionnement. Il suffit d'ajouter un padding-right au formulaire (ou à la division du formulaire, peu importe) pour laisser suffisamment de place à l'erreur et s'assurer qu'elle 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 en haut à peu près de la hauteur de votre champ de saisie et une marge en bas à peu près de la distance de la gauche à l'endroit où votre padding-right devrait commencer. J'ai essayé cela, ce n'est pas génial, mais cela fonctionne avec trois propriétés et ne nécessite pas de flottants ou d'absolus :

   <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>

2voto

Rodrigo Points 1196

Cette réponse m'a vraiment aidé, dans mon cas je devais filtrer certains éléments et avoir un alignement spécial sur leur div d'erreur,

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X