2012-04-17 3 views
6
Inline-Block

Ich bin mit der jQuery Validation PluginjQuery Validierung zeigt Fehler als Inline standardmäßig müssen, dies ändern

Wie ändere ich die generierten Fehlermeldungen display Wert inline-block, wenn sie nicht versteckt?

Ich habe mit CSS versucht, aber die jQuery überschreibt dies.

+0

Wo ist Ihr Code? Was hast du bis jetzt gemacht? – Sparky

+0

Hallo, leider ist das ein internes Projekt und ich kann Sie nicht auf einen Link verweisen. Ich versuche zu finden, wo die jquery den Code sagt, um Anzeige hinzuzufügen: Inline zu der Fehlerbeschriftung, wenn angezeigt, und ändern Sie diese zur Anzeige: Inline-Block –

+0

Ich habe Sie nicht gebeten, einen Link zu posten. Nichtsdestoweniger einfach in das Plugin schauen und nach Bedarf anpassen ... es ist nur jQuery/JavaScript. – Sparky

Antwort

4

die errorClass Option können Sie die Klasse angeben, zugewiesen Meldungen und Fehlerelemente Fehler:

$(".selector").validate({ 
    errorClass: "invalid" 
}) 

<style type="text/css"> 
    .invalid { 
    display: inline-block !important; 
    } 
</style> 

Siehe die Dokumentation zu den Prüferoptionen:

http://docs.jquery.com/Plugins/Validation/validate#options

+4

Damit ist es unmöglich, die Fehler zu verbergen, sobald das Feld gültig ist. – jetlej

+1

Vereinbart mit @jetlej, Dies bricht die Validierungsfunktionalität wie die Anzeige: keine vom Plugin erzeugten, um das zu verbergen Nicht benötigte Validierungsfehlernachricht wird aufgrund des! Wichtiges nicht mehr beachtet. –

0

Wenn Sie !important auf Ihrem CSS verwenden, sollte es Vorrang vor nehmen, was jQuery tut:

.error { 
    display: inline-block !important; 
} 
+0

Danke Ich habe das versucht, aber es hat nicht funktioniert –

+0

Hmm, funktioniert für mich ... Haben Sie in Firebug oder einem anderen Debugger untersucht, welcher Stil angewendet wird und was ist wodurch der 'Inline-Block' nicht angewendet wird? –

+0

Der Inline-Stil des Plugins überschreibt das CSS –

0

jQuery validate hat keine CSS-Stile definiert. Verwenden Sie andere Bibliotheken mit CSS-Definitionen für die Klasse "error"? Hier

ist JsFiddle Beispielcode mit jQuery mit inline-block für Fehlermeldung bestätigen:

http://jsfiddle.net/maxim75/HKnQD/4/

.error 
{ 
    color: Red; 
    display: inline-block; 
}​ 

öffnen Sie es und überprüfen in Ihrem Browser:

enter image description here

+0

Hallo, danke, das habe ich gestern beim Testen der Antworten festgestellt. Prost –

5

Ich bin darauf gestoßen und konnte CSS nicht verwenden, da jQuery die Methoden show() und hide() für das Element error verwendet (welches setze "display: block;" inline) nach der ersten Erstellung. Stattdessen können Sie die Highlight- und Unhighlight-Methoden des Validierungs-Plugins verwenden, um die Inline-CSS zu ändern.

errorElement: 'em', 

highlight: function(element, errorClass) { 
    $(element).addClass(errorClass); // good for changing field backgrounds 
    $(element).next('em').css('display','inline'); // keeps error message layout clean 
}, 

unhighlight: function(element, errorClass) { 
     $(element).removeClass(errorClass); // good for changing field backgrounds 
     $(element).next('em').css('display','none'); // keeps error message layout clean 
}, 
+0

Danke Kumpel. Prost –

+0

Das ist die richtige Antwort – hamishtaplin

Verwandte Themen