web-dev-qa-db-fra.com

jQuery écrase l'affichage des messages d'erreur de validation par défaut (Css) Popup / Tooltip comme

J'essaie de surcharger l'étiquette de message d'erreur par défaut avec un div au lieu d'une étiquette. J'ai regardé ce post aussi et je comprends comment le faire, mais mes limitations avec CSS me hantent. Comment puis-je afficher ceci comme certains de ces exemples:

Exemple # 1 (Dojo) - Doit saisir une entrée invalide pour voir l'affichage d'erreur
Exemple # 2

Voici un exemple de code qui remplace l'étiquette d'erreur en 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 perdue sur la partie css mais la voici:

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

MISE À JOUR:

D'accord, j'utilise ce code maintenant, mais l'image et le placement dans la fenêtre contextuelle sont plus grands que la bordure, est-ce que cela peut être ajusté pour être dynamique, c'est la 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>
jquerycsspopuptooltipcustom-errors
69
Phill Pafford

Vous pouvez utiliser l’option errorPlacement pour remplacer l’affichage des messages d’erreur par peu de css. Parce que css ne suffira pas à produire l’effet dont vous avez besoin.

$(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 gauche et supérieur 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());
    }

Etc. Vous pouvez vous référer à documentation de jQuery sur 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: scriptiny.com )

Si vous souhaitez que le message d'erreur s'affiche après un groupe d'options ou de champs. Regroupez ensuite tous les éléments d'un conteneur, un "div" ou un "champs". Ajoutez une classe spéciale à tous les 'groupe' par exemple. 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:

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 cela fonctionne parfaitement pour moi. Voici un aperçu: alt text

Je viens d’apporter un très petit ajustement au remplissage du message pour l’adapter à 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 la plage 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 puis donnez au conteneur une largeur (c'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 cela fonctionne pour moi. Il se peut que quelque chose d'autre dans votre code soit à l'origine du problème.

186
Nadia Alramli

J'utilise jQuery BeautyTips pour obtenir le petit effet de bulle dont vous parlez. Je n'utilise pas le plugin Validation, je ne peux donc pas y aider beaucoup, mais il est très facile de styler et d'afficher les BeautyTips. Vous devriez examiner. Je crains que ce ne soit pas aussi simple que de simples règles CSS, car vous devez utiliser l'élément canvas et inclure un fichier javascript supplémentaire pour IE pour jouer à Nice avec celui-ci.

3
Paolo Bergantino

Malheureusement, je ne peux pas commenter avec ma réputation de débutant, mais j'ai une solution à la question de l'écran en blanc, 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 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 manière permet au validateur de savoir quels éléments div à supprimer, au lieu de tous. Travaillé pour moi, mais je ne suis pas tout à fait sûr pourquoi, alors si quelqu'un pouvait élaborer cela pourrait aider les autres une tonne.

2
user269036

Quelques choses:

Premièrement, je ne pense pas que vous ayez vraiment besoin d'une erreur de validation pour un champs de radio, car vous pourriez simplement faire vérifier l'un des champs par défaut. La plupart des gens préfèrent corriger quelque chose que de fournir quelque chose. Par exemple:

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

est plus susceptible d'être changé pour la bonne réponse car la personne ne veut pas qu'elle passe à la valeur par défaut. S'ils le voient en blanc, ils sont plus susceptibles de penser "rien de votre affaire" et de le sauter.

Deuxièmement, j’ai pu obtenir l’effet que je pense que vous voulez sans aucune propriété de positionnement. Vous ajoutez simplement padding-right au formulaire (ou à la division du formulaire, peu importe) pour laisser suffisamment de place à votre erreur et vous assurer que celle-ci tiendra bien dans cette zone. Ensuite, vous avez une classe CSS prédéfinie appelée "erreur" et vous la définissez comme ayant une marge négative supérieure à peu près à la hauteur de votre champ de saisie et une marge gauche sur la distance entre la gauche et celle où se trouve votre droite de remplissage. devrait commencer. J'ai essayé ceci, ce n'est pas génial, mais cela fonctionne avec trois propriétés et ne nécessite aucun flottant ni absolu:

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

Cette réponse m’a vraiment aidé. Dans mon cas, j’ai dû filtrer certains éléments et obtenir un alignement spécial sur leur erreur,

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

Ajoutez les fichiers CSS suivants à votre méthode .validate pour modifier le fichier CSS ou la fonctionnalité

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

Si vous pouviez expliquer pourquoi vous devez remplacer l'étiquette par une div, cela aiderait certainement ...

Aussi, pourriez-vous coller un échantillon qui pourrait être utile ( http://dpaste.com/ ou http://Pastebin.com/ )

0
weisjohn