emplacement d'erreur jquery

Question

J'ai une forme de jquery. les validations fonctionnent correctement, mais j'aimerais que l'erreur soit correctement placée. en ce moment il affiche dans IE 7 comme:

alt text http://img412.imageshack.us/img412/1810/errorhma.jpg

mais je voudrais l'afficher comme:

alt text http://img520.imageshack.us/img520/7089/error1ace.jpg

c'est le code CSS:

div.error { display:none; } 
      <%-- input { border: 1px solid black; }--%> 
      input:focus { border: 1px dotted black; } 
      input.error { border: 2px solid red; } 
      label.error { color: white; font-size:16px; font-family:Nyala; background-color: red } 
      label.valid { color: green; } 

Answer 1

essayer label.error {display: block;}

Answer 2

Il y a quelques problèmes, le premier est que la coloration d'erreur est montrée comme entourant l'élément d'élément d'entrée. Donc soit vous devez utiliser la div d'erreur pour contenir l'élément d'entrée ou simplement changer la couleur du conteneur pour l'élément de formulaire. Je vote pour changer la couleur du conteneur.

Deuxièmement, vous voulez que le div.error soit clair à gauche et à droite (en supposant que vous êtes juste changer la couleur du récipient pour l'élément de forme), donc il suffit d'ajouter:

div.error { 
    clear: both; 
} 

Cela suppose bien sûr que pour une raison ou une autre, vous l'avez fait flotter vers la gauche. Dans tous les cas, voir un exemple simple de ce une façon de étalez

http://jsbin.com/amaxa

Answer 3

Vous pouvez contrôler la mise en place du message d'erreur avec errorPlacement . La valeur par défaut est "error.insertAfter (element)". Vous pouvez utiliser l'un de ces par exemple:

errorPlacement: function(error, element) { 
    error.insertBefore(element); 
    //error.appendTo(element.parent().next()); 
    //error.appendTo(label.insertAfter(element)); 
    //error.insertAfter(element.sibling(a)); 
} 

ou même mettre ici une certaine condition et utiliser d'autres déclarations:

errorPlacement: function(error, element) { 
    if (element.is(".something")) { 
     element.nextAll('div').html(error); 
    } else { 
     error.insertAfter(element); 
    } 
} 

Hope it helps