Skip to content

JQuery überschreiben Standard Validierung Fehlermeldung Anzeige (Css) Popup/Tooltip wie

Wenn Sie Probleme mit Ihrem Code oder Ihrer Arbeit finden, denken Sie daran, immer in einer Testumgebung zu testen, bevor Sie den Code der endgültigen Arbeit hinzufügen.

Lösung:

Sie können die Option errorPlacement verwenden, um die Anzeige der Fehlermeldung mit wenig css zu überschreiben. Denn css allein wird nicht ausreichen, um den gewünschten Effekt zu erzielen.

$(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);
        }

    });
});

Sie können mit den css-Attributen left und top spielen, um die Fehlermeldung oben, links, rechts oder unten im Element anzuzeigen.
Zum Beispiel, um den Fehler oben anzuzeigen:

    errorPlacement: function(error, element) {
        element.before(error);
        offset = element.offset();
        error.css('left', offset.left);
        error.css('top', offset.top - element.outerHeight());
    }

Und so weiter. Weitere Optionen finden Sie in der jQuery-Dokumentation über css.

Hier ist das css, das ich verwendet habe. Das Ergebnis sieht genau so aus, wie Sie es sich wünschen. Mit so wenig CSS wie möglich:

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

Und hier ist das Hintergrundbild, das du brauchst:

alt text
(Quelle: scriptiny.com)

Wenn Sie möchten, dass die Fehlermeldung nach einer Gruppe von Optionen oder Feldern angezeigt wird. Dann gruppieren Sie alle diese Elemente in einem Container, einem 'div' oder einem 'fieldset'. Fügen Sie allen Elementen eine spezielle Klasse hinzu, z.B. 'group'. Und fügen Sie folgendes am Anfang der errorPlacement-Funktion ein:

errorPlacement: function(error, element) {
    if (element.hasClass('group')){
        element = element.parent();
    }
    ...// continue as previously explained

Wenn Sie nur bestimmte Fälle behandeln wollen, können Sie stattdessen attr verwenden:

if (element.attr('type') == 'radio'){
    element = element.parent();
}

Das sollte ausreichen, damit die Fehlermeldung neben dem übergeordneten Element angezeigt wird.

Möglicherweise müssen Sie die Breite des übergeordneten Elements so ändern, dass sie weniger als 100% beträgt.


Ich habe Ihren Code ausprobiert und er funktioniert bei mir einwandfrei. Hier ist eine Vorschau:
alt text

Ich habe nur eine sehr kleine Anpassung an die Auffüllung der Nachricht vorgenommen, damit sie in die Zeile passt:

div.error {
    padding: 2px 5px;
}

Sie können diese Zahlen ändern, um die Auffüllung oben/unten oder links/rechts zu erhöhen/verringern. Sie können der Fehlermeldung auch eine Höhe und Breite hinzufügen. Wenn Sie immer noch Probleme haben, versuchen Sie, die span durch ein div zu ersetzen

Und dann geben Sie dem Container eine Breite (dies ist sehr wichtig)

div.group {
    width: 50px; /* or any other value */
}

Über die leere Seite. Wie ich schon sagte, habe ich Ihren Code ausprobiert und er funktioniert bei mir. Es könnte etwas anderes in Ihrem Code sein, das das Problem verursacht.

Ich verwende jQuery BeautyTips, um den kleinen Blasen-Effekt zu erzielen, von dem Sie sprechen. Ich benutze das Validation-Plugin nicht, also kann ich da nicht wirklich viel helfen, aber es ist sehr einfach, die BeautyTips zu gestalten und anzuzeigen. Sie sollten sich das ansehen. Ich fürchte, es ist nicht so einfach, wie nur CSS-Regeln, da Sie das Canvas-Element verwenden und eine zusätzliche Javascript-Datei für den IE einfügen müssen, um mit ihm zu spielen.

Ein paar Dinge:

Erstens glaube ich nicht, dass man wirklich einen Überprüfungsfehler für ein Radio Fieldset braucht, weil man einfach eines der Felder standardmäßig ankreuzen kann. Die meisten Leute würden lieber etwas korrigieren, als etwas anzugeben. Zum Beispiel:

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

wird eher in die richtige Antwort umgewandelt, da die Person NICHT will, dass die Standardeinstellung verwendet wird. Wenn es leer ist, denkt man eher: "Das geht dich nichts an" und überspringt es.

Zweitens konnte ich den von Ihnen gewünschten Effekt ohne Positionierungseigenschaften erzielen. Sie fügen dem Formular (oder dem Div des Formulars, was auch immer) einfach padding-right hinzu, um genügend Platz für Ihren Fehler zu schaffen und sicherzustellen, dass Ihr Fehler in diesen Bereich passt. Dann haben Sie eine voreingestellte css-Klasse namens "error", die Sie so einstellen, dass sie einen negativen margin-top hat, der ungefähr der Höhe Ihres Eingabefeldes entspricht, und einen margin-left, der ungefähr dem Abstand von der linken Seite bis zu dem Punkt entspricht, an dem Ihr padding-right beginnen soll. Ich habe das ausprobiert, es ist nicht toll, aber es funktioniert mit drei Eigenschaften und erfordert keine Floats oder Absolutwerte: