JQuery Conflict Ajax Validation Messages Return Location

Question

J'ai un problème avec mon formulaire jquery. Si vous regardez ceci violon lorsque je crée mon formulaire, vous remarquerez qu'après la création d'un champ de saisie, puis sa suppression, les messages d'alerte commencent à apparaître sur l'élément suivant (en dessous de l'endroit où ils sont initialement placés).

Pour clarifier : si l'utilisateur n'a pas encore saisi d'informations, les alertes s'affichent à la bonne place (à droite du champ de saisie, en texte rouge). En revanche, si l'utilisateur a saisi des informations, puis les supprime, l'alerte ajax ("ce champ est obligatoire") s'affiche au mauvais endroit, dans le champ situé en dessous de l'endroit où elle est censée s'afficher. Pour visualiser le problème, saisissez tous les champs correctement, puis supprimez votre nom. Le message "ce champ est obligatoire" apparaît dans le champ de l'adresse électronique, alors qu'il devrait se trouver dans le champ du nom.

Le js qui contrôle la validation est :

$(document).ready(function() {
    $('#commentForm').validate({
        submitHandler: function(form) {
            $.ajax({
                type: 'POST',
                url: 'process.php',
                data: $(this).serialize(),
                success: function(returnedData) {
                    $('#commentForm').append(returnedData);
                }
            });         
            return false;
        },
        errorPlacement: function(error, element) {
              error.insertAfter( element).position({
                  my:'right top',
                  at:'right top',
                  of:element          
              });
         }  
    }); 
});

EDIT 1 : L'utilisation du mode Jquery NoConflict n'a pas résolu ce problème. Il semble en effet qu'il s'agisse d'un problème lié à la manière dont les deux plugins fonctionnent ensemble.

EDIT 2 : Il y a en fait deux solutions à ce problème. La première consiste à inclure le script script de jquery UI dans l'en-tête, ce qui permet à son utilitaire 'position' d'aligner les messages d'erreur en haut à droite.

L'autre solution, comme l'ont fait remarquer d'autres contributeurs, consiste à modifier le code CSS pour qu'il soit défini comme suit

form p {
  position: relative;   /* This ensures error label is positioned within the p tag */
}
label.error {  
  top: 0; /* This ensures that it lines up with the top of the input */
  right:90px; 
  color: red; 
  position:absolute;
}

Merci pour tous les commentaires.

Answer 1

Il me semble qu'il s'agit d'un problème de style (mais encore une fois, c'est le cas pour tout :) avec l'utilisation incorrecte de position:absolute, qui, par ailleurs, annule float:left - http://jsfiddle.net/kmJ87/17/

Si vous êtes vraiment attaché à position:absolute (plus de style dans la css complète, comme un joli message de boîte peut-être ?) vous pourriez le corriger en ajoutant position:relative à l'élément parent (paragraphe dans ce cas) - http://jsfiddle.net/kmJ87/18/

Answer 2

Le problème réside en partie dans les déclarations CSS :

/* Begin first declaration for <label class="error" /> */
label.error {
    color: red;
    position:absolute;
}
/* Begin second declaration for <label class="error" />. Nothing inherently wrong with this, but a bit odd considering the simplified fiddle.*/
label.error {
    float: left;    /* Kinda replaces previously declared absolute position as "float" and "position" are kinda, but not really, mutually exclusive properties. */
    right: 30px;    /* Useless declaration (for now) as "right" is used wih "position" not "float". */
    color: #ff714d;
    position: absolute; /* Replaces previously declared float and makes the previously assigned "right" property useful again. */
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

Depuis position: absolute; est la dernière déclaration (dans les déclarations de position v. float), l'élément est positionné de manière absolue.

La première partie du problème réside dans le fait que, étant donné que le top n'a pas été déclarée et la propriété display de l'étiquette est block le navigateur positionne le sommet sur la ligne suivante (ce qui correspond à l'emplacement du sommet dans un flux statique).

La deuxième partie du problème est que, puisqu'un float a été déclarée, le navigateur essaie toujours de float l'élément également (ce qui fait que le navigateur positionne le haut sur la ligne suivante).

La solution (jusqu'à présent) consiste à supprimer l'élément float et déclarer un top de 0 dans le label.error des styles.

label.error {
    color: red;
    position:absolute;
}

label.error {
    top: 0;     /* Replaces "float: left;" and fixes the display. */
    right:30px;
    color: #ff714d;
    position: absolute;
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

ou dans une seule déclaration :

label.error {
    color: red;
    position: absolute;
    right: 30px;
    top: 0;
    color: #ff714d;
    position: absolute;
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

La mise à jour du code pose le dernier problème, à savoir que tous les messages d'erreur apparaissent désormais tout en haut du document.

Ce phénomène est dû à la position: absolute; car les éléments positionnés de manière absolue sont retirés du flux normal du document et positionnés (de manière absolue) par rapport à l'élément ancêtre non statique le plus proche.

Dans ce cas, il n'y en a pas, de sorte que le <label class="error" /> sont positionnés de manière absolue par rapport à l'élément <body /> . La dernière partie de la solution consiste donc à faire de la p les éléments ne sont pas positionnés de manière statique (car c'est là que les erreurs devraient être positionnées de manière absolue).

CSS final :

p {
    position: relative;
}

label.error {
    color: red;
    position: absolute;
    right: 30px;
    top: 0;
    color: #ff714d;
    position: absolute;
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

Mise à jour (et fonctionnement) du violon.

Answer 3

Le javascript jcps ne devrait pas avoir d'influence sur la page puisqu'il ne fait que définir un objet et n'est pas (encore) utilisé. Lorsque j'ai manipulé le code, j'ai également rencontré des problèmes même si le javascript jcps était commenté.

Il semble que le navigateur ait eu des problèmes avec la mise en page de l'étiquette dans un paragraphe, en changeant les paragraphes en divs avec position relative et en ajoutant top 0px au style d'erreur, les choses sont devenues plus stables. J'ai remarqué que le validateur avait encore quelques problèmes intermittents, peut-être causés par quelques bogues mineurs.

C'est la version que j'ai retenue pour l'instant : http://jsfiddle.net/kmJ87/20/

Answer 4

Nous pouvons déclarer document.ready méthode deux voies

1. $ (document).ready(function() {

   // notre code vient ici

   }) ; Ici $ est un montant global et renvoie à l'objet jQuery.

2. jQuery (document).ready(function( $ ) {

   // Notre code vient ici

   }) ; // Ici $ est un local et renvoie à la variable jQuery objet.

Consultez le 5ème point de ce lien : http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

Answer 5

De nombreuses bibliothèques JavaScript utilisent $ comme nom de fonction ou de variable, à l'instar de jQuery. Dans le cas de jQuery, $ n'est qu'un alias de jQuery, de sorte que toutes les fonctionnalités sont disponibles sans utiliser $. Si nous devons utiliser une autre bibliothèque JavaScript en plus de jQuery, nous pouvons rendre le contrôle de $ à l'autre bibliothèque en appelant jQuery.noConflict() ;

voir l'exemple ici :

 jQuery.noConflict();
 (function($)
  {
     // your code goes here
 })
(jQuery);

essayer avec elle