jQuery überschreibt Standard-Validierungsfehlermeldung (CSS) Popup / Tooltip wie

70

Ich versuche, die Standardbezeichnung für Fehlermeldungen mit einem div anstelle einer Bezeichnung zu überschreiben. Ich habe mir auch diesen Beitrag angesehen und erfahren, wie es geht, aber meine Einschränkungen bei CSS verfolgen mich. Wie kann ich dies wie einige dieser Beispiele anzeigen:

Beispiel 1 (Dojo) - Muss eine ungültige Eingabe eingeben, um die Fehleranzeige zu sehen.
Beispiel 2

Hier ist ein Beispielcode, der die Fehlerbezeichnung für ein div-Element überschreibt

$(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    "elem.1": {
                        required: true,
                        digits: true
                    },
                    "elem.2": {
                        required: true
                    }
                },
                errorElement: "div"
            });                  
        });

Jetzt bin ich im CSS-Teil ratlos, aber hier ist es:

div.error {
        position:absolute;
        margin-top:-21px;
     margin-left:150px;
     border:2px solid #C0C097;
        background-color:#fff;
        color:white;
        padding:3px;
        text-align:left;
        z-index:1;
        color:#333333;
     font:100% arial,helvetica,clean,sans-serif;
     font-size:15px;
     font-weight:bold;  
    }

AKTUALISIEREN:

Okay, ich verwende diesen Code jetzt, aber das Bild und die Platzierung im Popup sind größer als der Rand. Kann dies so angepasst werden, dass es dynamisch ist?

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

   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 - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox
} else {
   // Error placement for single elements
   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 - (element.height() / 2));
}

Das CSS ist das gleiche wie unten (Ihr CSS-Code)

Html

<span>
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</span>
jquery  css  popup  tooltip  custom-errors 
— Phill Pafford
quelle
Würden Sie auch Ihren HTML-Formularcode hinzufügen? Es ist schwer zu sagen, warum das Radio nicht nur mit Javascript funktioniert.
— Nadia Alramli
Ich habe meiner Antwort weitere Details mit einer Vorschau hinzugefügt. Der Code funktioniert wirklich. Wenn Sie die Fehlermeldung anpassen möchten, können Sie mehr CSS hinzufügen, aber die Grundlagen sind alle vorhanden.
— Nadia Alramli
Die Seite wird leer, wenn Sie Werte eingeben. Ich glaube nicht, dass es etwas mit den von mir vorgeschlagenen Änderungen zu tun hat. Wenn Sie die errorPlacement-Funktion entfernen, erhalten Sie immer noch eine leere Seite? Wenn Sie dies tun, hängt das Problem nicht mehr mit dieser Frage zusammen. Es ist unmöglich zu sagen, was los ist, ohne die eigentliche Seite zu sehen. Oder mehr Details erfahren. Ihr Beispiel funktioniert für mich einwandfrei. Das Problem ist wahrscheinlich auf einen nicht erfassten Javascript-Fehler an einer anderen Stelle zurückzuführen.
— Nadia Alramli
Ich habe die errorPlacement-Funktion entfernt und sie funktioniert ohne sie einwandfrei. Ich bin ratlos, weil ich das verwenden möchte, was Sie bereitgestellt haben, aber es funktioniert nicht richtig.
— Phill Pafford
hmm, versuchen Sie, der errorPlacement-Funktion eine Warnung hinzuzufügen, und prüfen Sie, ob sie aufgerufen wird, wenn die Seite leer wird. Wenn das nicht geholfen hat, das Innere der Funktion in einen Versuch / Fang zu packen. So: versuchen Sie {/ * den Code * /} catch (e) {alert (e);}
— Nadia Alramli

Antworten:

186

Mit der Option errorPlacement können Sie die Fehlermeldung mit wenig CSS überschreiben. Weil CSS allein nicht ausreicht, 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 linken und oberen CSS-Attributen 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 zu CSS .

Hier ist das CSS, das ich verwendet habe. Das Ergebnis sieht genauso aus wie das gewünschte. 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 Sie brauchen:

Alt-Text
(Quelle: scriptiny.com )

Wenn die Fehlermeldung nach einer Gruppe von Optionen oder Feldern angezeigt werden soll. Gruppieren Sie dann alle diese Elemente in einem Container als "div" oder "fieldset". Fügen Sie beispielsweise allen 'Gruppen' eine spezielle Klasse hinzu. Fügen Sie am Anfang der errorPlacement-Funktion Folgendes hinzu:

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

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

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

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

Möglicherweise müssen Sie die Breite des übergeordneten Elements auf weniger als 100% ändern.

Ich habe Ihren Code ausprobiert und er funktioniert für mich einwandfrei. Hier ist eine Vorschau: Alt-Text

Ich habe gerade eine sehr kleine Anpassung an der Nachrichtenauffüllung vorgenommen, damit sie in die Zeile passt:

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

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

<div class="group">
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</div>

Und dann geben Sie dem Behälter eine Breite (das ist sehr wichtig)

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

Über die leere Seite. Wie gesagt, ich habe Ihren Code ausprobiert und er funktioniert für mich. Möglicherweise verursacht etwas anderes in Ihrem Code das Problem.

— Nadia Alramli
quelle
Vielen Dank Ich mag die errorPlacement-Option, aber das CSS ist mehr das, wonach ich suche. Wenn Sie sich die beiden Beispiellinks ansehen, die ich gegeben habe, wollte ich, dass etwas so aussieht. Danke noch einmal.
— Phill Pafford
Wenn ich ein Radio oder eine Kontrollkästchengruppe habe, wird der Fehler div über einigen der Optionen angezeigt, die ich auswählen muss. Gibt es eine Möglichkeit, nach der Gruppe anzuzeigen?
— Phill Pafford
1
@Phill, ich würde gerne helfen. Aber es ist besser, dies als eine andere Frage zu posten. Hauptsächlich, weil wenn ich diesen Beitrag mehr bearbeite, er als Community-Wiki endet. Und Kommentare sind nicht für Antworten geeignet. Wenn Sie dies auch als eine andere Frage veröffentlichen, erhalten Sie mehr Aufmerksamkeit und mögliche bessere Lösungen. Auf den ersten Blick auf den von Ihnen geposteten Link scheint es schwierig zu sein, den Pfeil anzuzeigen. Es sollte einen besseren Weg geben, dies zu tun.
— Nadia Alramli
2
@ Nadia - wow, du hast hier wirklich eine großartige Antwort gepostet. Es hat mir bei einem ähnlichen Problem, das ich hatte, sehr geholfen. Ich bin wirklich beeindruckt von Ihrem Verständnis von CSS und jQuery. Schöner Beitrag !!
— David Robbins
1
Die Positionierung ist relativ zum Dokument in Ihrem Beispiel. Wenn dies im modalen Popup oder so ist, funktioniert es nicht. Ich habe dies verwendet, um dieses Problem zu lösen: error.css('left', $(element).position().left + $(element).width() + 10); error.css('top', $(element).position().top);
— Kiteloop
3

Ich verwende jQuery BeautyTips , um den kleinen Blaseneffekt zu erzielen, von dem Sie sprechen. Ich benutze das Validierungs-Plugin nicht, daher kann ich dort nicht viel helfen, aber es ist sehr einfach, die BeautyTips zu stylen und anzuzeigen. Sie sollten es untersuchen. Es ist leider nicht so einfach wie nur CSS-Regeln, da Sie das Canvas-Element verwenden und eine zusätzliche Javascript-Datei hinzufügen müssen, damit der IE gut damit spielen kann.

— Paolo Bergantino
quelle
Wenn Sie die Farben der Blase nicht schnell anpassen möchten, können Sie ein Hintergrundbild wie im zweiten Beispiel verwenden.
— Paolo Bergantino
Ich habe mir Beauty-Tipps angesehen, kann es aber nicht mit dem Validierungs-Plugin mit der Fehleranzeige zum Laufen bringen. Irgendwelche anderen Gedanken?
— Phill Pafford
2

Ein paar Dinge:

Erstens glaube ich nicht, dass Sie wirklich einen Validierungsfehler für ein Funkfeldset benötigen, da Sie standardmäßig nur eines der Felder überprüfen lassen könnten. Die meisten Leute würden lieber etwas korrigieren als etwas bereitstellen. Zum Beispiel:

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

Es ist wahrscheinlicher, dass die richtige Antwort geändert wird, da die Person NICHT möchte, dass die Standardeinstellung verwendet wird. Wenn sie es leer sehen, denken sie eher "geht Sie nichts an" und überspringen es.

Zweitens konnte ich den Effekt erzielen, den Sie meiner Meinung nach ohne Positionierungseigenschaften wünschen. Sie fügen dem Formular (oder dem Teil des Formulars, was auch immer) einfach das Auffüllrecht 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 "Fehler" und Sie haben sie so eingestellt, dass sie einen negativen Rand oben hat, ungefähr so ​​hoch wie Ihr Eingabefeld, und einen Rand links über den Abstand von links bis zu dem Punkt, an dem Sie rechts auffüllen sollte beginnen. Ich habe es ausprobiert, es ist nicht großartig, aber es funktioniert mit drei Eigenschaften und erfordert keine Floats oder Absolutes:

   <style type="text/css">
    .error {
        width: 13em; /* Ensures that the div won't exceed right padding of form */
        margin-top: -1.5em;  /*Moves the div up to the same level as input */
        margin-left: 11em;   /*Moves div to the right */
        font-size: .9em;     /*Makes sure that the error div is smaller than input */
    }

   <form>
   <label for="name">Name:</label><input id="name" type="textbox" />
   <div class="error"><<< This field is required!</div>
   <label for="numb">Phone:</label><input id="numb" type="textbox" />
   <div class="error"><<< This field is required!</div>
   </form>
— Anthony
quelle
Vielen Dank für Ihre Antwort, aber der Client möchte das Optionsfeld leer lassen und den Benutzer zwingen, eine Option auszuwählen. Ich werde in Ihr CSS schauen :)
— Phill Pafford
Ich mag das bis auf das Radio und die Kontrollkästchen. Könnten Sie das auch berücksichtigen?
— Phill Pafford
Dies wird in IE6 nicht korrekt angezeigt (Havent überprüft noch andere Versionen)
— Phill Pafford
Was Radio und Kontrollkästchen betrifft, hängt dies davon ab, ob Sie eine Gruppe von Feldern (Feldsatz) oder nur eines haben. Wenn es sich um eine Gruppe handelt, schlage ich vor, die Breite des Feldsatzes so einzustellen, dass der zuvor erwähnte Abstand erhalten bleibt, und dann Ihr Fehlerflag auf das Ganze zu verweisen, und möglicherweise sogar eine Klasse zum Feldsatz hinzuzufügen, damit es einen Rand erhält, wenn es angezeigt wird hat die Flagge, so dass der Benutzer weiß, dass Sie diese Gruppe meinen ....
— Anthony
Aber Sie möchten nicht wirklich eine Flagge für ein Kontrollkästchen, da dies keinen Sinn ergibt. Was ist, wenn die Antwort Nein zu der Box lautet, dann ist sie immer noch "fertig". Wenn Sie eine Gruppe von Feldern haben und diese mindestens zwei aktivieren müssen, liegt der Fehler für das Feldset und nicht für das Feld vor.
— Anthony
2

Leider kann ich mit meinem Ruf als Neuling nichts anfangen, aber ich habe eine Lösung für das Problem, dass der Bildschirm leer wird, oder zumindest hat dies bei mir funktioniert. Anstatt die Wrapper-Klasse innerhalb der errorPlacement-Funktion festzulegen, legen Sie sie sofort fest, wenn Sie den Wrapper-Typ festlegen.

$('#myForm').validate({
    errorElement: "div",
    wrapper: "div class=\"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() + 5);
        error.css('top', offset.top - 3);
    }

});

Ich gehe davon aus, dass der Validator auf diese Weise weiß, welche div-Elemente entfernt werden müssen, anstatt alle. Hat für mich gearbeitet, aber ich bin mir nicht ganz sicher, warum. Wenn also jemand etwas näher erläutern könnte, könnte dies anderen helfen.

Vielen Dank für Ihren Beitrag, wird es sich ansehen
— Phill Pafford
2

Diese Antwort hat mir wirklich geholfen. In meinem Fall musste ich einige Elemente herausfiltern und ihre Fehlerdivision speziell ausrichten.

errorPlacement:function(error,element) {
    if (element.attr("id") == "special_element") {
        // special align
    } else { // default error scheme
        error.insertAfter(element);
    }
}
— Rodrigo
quelle
1

Fügen Sie Ihrer .validate-Methode das folgende CSS hinzu, um das CSS oder die Funktionalität zu ändern 

 errorElement: "div",
    wrapper: "div",
    errorPlacement: function(error, element) {
        offset = element.offset();
        error.insertAfter(element)
        error.css('color','red');
    }
— ajaysoni98292
quelle
0

Wenn Sie einen Grund angeben könnten, warum Sie das Etikett durch ein div ersetzen müssen, würde dies sicherlich helfen ...

Könnten Sie auch ein Beispiel einfügen, das hilfreich wäre ( http://dpaste.com/ oder http://pastebin.com/ ) ?

— weisjohn
quelle
Die Standardaktion besteht darin, die Beschriftung neben dem Element mit dem Fehler zu platzieren. Dadurch werden die Elemente rechts vom Fehlerelement verschoben. wollte, dass das Fehlerelement als Tooltip wie ein Popup angezeigt wird, das über den anderen Elementen schwebt / schwebt.
— Phill Pafford
Es tut mir leid, ich glaube nicht, dass ich ein Bild des gewünschten Fehlerdivs posten könnte, aber die beiden obigen Beispiele haben etwas Ähnliches wie das, was ich möchte. Danke
— Phill Pafford
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.