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

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>

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:

_{(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:

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.

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.

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>

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.

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

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

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/ ) ?