jquery error placement

Question

ich habe eine jquery-form. Die Validierungen funktionieren korrekt, aber ich möchte, dass der Fehler richtig platziert wird. jetzt zeigt sie im IE 7 als:

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

, aber ich möchte es anzuzeigen, wie:

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

dies der CSS-Code ist:

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

try label.error {display: block;}

Answer 2

Es gibt ein paar Probleme, das erste ist, dass die Fehlerfarbe als das Element des Eingabeelements umgibt. Entweder müssen Sie das Fehler-Div verwenden, um das Eingabeelement zu enthalten, oder Sie ändern einfach die Farbe des Containers für das Formularelement. Ich stimme für die Änderung der Farbe des Containers.

Zweitens wollen Sie die div.error auf der linken und rechten klar sein (Sie für das Formularelement Ändern der Farbe des Behälters sind nur unter der Annahme), so fügen Sie einfach:

div.error { 
    clear: both; 
} 

Das setzt natürlich voraus, dass Sie es aus irgendeinem Grund nach links verschoben haben. Auf jeden Fall ein einfaches Beispiel sehen, was eine Möglichkeit, es zu legen

http://jsbin.com/amaxa

Answer 3

Sie die Platzierung der Fehlermeldung mit errorPlacement steuern . Der Standardwert ist "error.insertAfter (element)". Sie können eine davon verwenden, zB:

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

oder auch hier eine Bedingung setzen und andere Anweisungen verwenden:

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

Hoffe, es hilft