it-swarm.com.de

jQuery überschreibt die Anzeige der Standardvalidierungsfehlermeldung (CSS) wie Popup / Tooltip

Ich versuche, die Standardfehlermeldungsbezeichnung 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 das wie einige der folgenden Beispiele anzeigen:

Beispiel # 1 (Dojo) - Es muss eine ungültige Eingabe eingegeben werden, um die Fehleranzeige zu sehen
Beispiel # 2

Hier ist ein Beispielcode, der die Fehlerbezeichnung eines div-Elements überschreibt

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

Jetzt bin ich ratlos auf der CSS-Seite, 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 die Höhe 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));
}

die CSS ist die 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>
69
Phill Pafford

Sie können die Option errorPlacement verwenden, um die Anzeige der Fehlermeldung mit wenig CSS zu überschreiben. Denn CSS allein reicht nicht aus, 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. Um zum Beispiel 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 jQuery-Dokumentation zu css .

Hier ist das CSS, das ich verwendet habe. Das Ergebnis sieht genau so aus, wie Sie es möchten. Mit möglichst wenig CSS:

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, einem "div" oder einem "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 es funktioniert einwandfrei für mich. Hier ist eine Vorschau: alt text

Ich habe gerade eine sehr kleine Änderung am Nachrichtenpolster vorgenommen, damit es in die Zeile passt:

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

Sie können diese Zahlen ändern, um den Abstand oben/unten oder links/rechts zu vergrößern/verkleinern. Sie können der Fehlermeldung auch eine Höhe und Breite hinzufügen. Wenn Sie immer noch Probleme haben, versuchen Sie, den Bereich durch einen 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 Container eine Breite (das ist sehr wichtig)

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

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

186
Nadia Alramli

Ich benutze jQuery BeautyTips , um den kleinen Blaseneffekt zu erzielen, von dem Sie sprechen. Ich benutze das Validierungs-Plugin nicht, daher kann ich dort nicht wirklich viel helfen, aber es ist sehr einfach, die BeautyTips zu stylen und anzuzeigen. Sie sollten sich darum kümmern. Es ist leider nicht so einfach wie nur CSS-Regeln, da Sie das Canvas-Element verwenden und eine zusätzliche Javascript-Datei für IE) einbinden müssen, um Nice damit zu spielen.

3

Leider kann ich mit meinem Ruf als Neuling keinen Kommentar abgeben, aber ich habe eine Lösung für das Problem, dass der Bildschirm leer wird, oder zumindest hat dies für mich funktioniert. Anstatt die Wrapper-Klasse in 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 Prüfer auf diese Weise weiß, welche div-Elemente entfernt werden müssen, anstatt alle. Arbeitete für mich, aber ich bin mir nicht ganz sicher, warum. Wenn jemand das ausarbeiten könnte, könnte er anderen helfen.

2
user269036

Ein paar Dinge:

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

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

wird eher in die richtige Antwort geändert, 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, von dem ich glaube, dass Sie ihn ohne Positionierungseigenschaften haben möchten. Sie fügen dem Formular (oder dem Teil des Formulars, was auch immer) nur ein Fü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 mit dem Namen "error" und sie hat einen negativen oberen Rand, ungefähr die Höhe Ihres Eingabefelds, und einen linken Rand, ungefähr den Abstand von links zu der Stelle, an der 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>
2
Anthony

Diese Antwort hat mir sehr geholfen, in meinem Fall musste ich einige Elemente herausfiltern und eine spezielle Ausrichtung auf ihre Fehler-Div haben,

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

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

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

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

0
weisjohn