Wie nicht mit jquery.validation Plugin

Question

Okay Leute,

Ich habe durch alle anderen Beiträgen und Frage auf jQuery Validierung Plugin als Label Fehlerelement angezeigt werden, und sie scheinen zu Ich suche nicht, was machen.

Ich möchte den Display-Fehler nicht mit der Nachricht angezeigt werden, sondern nur einen roten Rahmen um das Eingabefeld stattdessen erstellen.

Hier ist nur ein Teil der Form:

<form id="donate_form" name="checkoutForm" method="post"> 
    <label class="desc" id="title0" for="billing_name_first"> 
    Name 
    <span id="req_1" class="req">*</span> 
</label> 
<div> 
    <span class="left"> 
     <input name="billing.name.first" id="billing_name_first" type="text" class="field text required" value="" tabindex="1" /> 
     <label for="billing_name_first">First</label> 
    </span> 
    <span class="right"> 
     <input name="billing.name.last" id="billing_name_last" type="text" class="field text required" value="" tabindex="2" /> 
     <label for="billing_name_last">Last</label> 
    </span> 
</div> 

ich davon aus, dass ich mich die Klasse am Eingang erforderlich vergeben muß ??

Dann mit CSS die label.error verstecken, die vom Plugin ausgespuckt wird? Ich habe das versucht, aber nicht gehen.

Sehe ich an der richtigen Stelle?

Danke!

Answer 1

Ich verstehe, was Sie erreichen möchten; Ich hatte die gleichen Anforderungen, hatte aber ernsthafte Schwierigkeiten, es zu erreichen, aber ich tat es. Hier ist, wie:

1. Ich habe zwei CSS-Style-Klassen "errorHighlight" und "TextInput-", etwa so:

   .errorHighlight { border: 2px solid #CC0000; } .textinput {border: 1px silver solid;}

2. Zur Entwurfszeit I angewandt, um die "Texteingabe" -Klasse zu meinen Text-Eingabefeldern: <input type="text" class="textinput" />

3. Und dann in meinem jQuery Formular Validierung Plugin-Einstellungen in meiner Javascript-Datei, fügte ich die follo Flügel allgemeine Validierungseinstellungen für alle Formulare auf dieser Seite:

    $.validator.setDefaults({ 
         errorPlacement: function(error, element) { 
          $(element).attr({"title": error.text()}); 
         }, 
         highlight: function(element){ 
          //$(element).css({"border": "2px solid #CC0000"}); 
          $(element).removeClass("textinput"); 
          $(element).addClass("errorHighlight"); 
         }, 
         unhighlight: function(element){ 
          //$(element).css({"border": "2px solid #CC0000"}); 
          $(element).removeClass("errorHighlight"); 
          $(element).addClass("textinput"); 
         } 
        }); 
   

Nun, wenn eine Feldüberprüfung fehlschlägt, die „highlight“ Callback-Funktion wird auf dem Element genannt. Die Callback-Funktion "errorPlacement" verhindert die Standardaktion des Einfügens einer Beschriftung nach dem Eingabefeld Fehler, stattdessen hängt sie die Fehlermeldung an das Attribut "title" des Feldes an (das als Textquelle für eine QuickInfo-Anzeige verwendet werden kann) .

Hoffe, das hilft.

Answer 2

Ich weiß nicht, ob dies der richtige Weg ist, es zu tun, aber wir verwenden:

jQuery.validator.messages.required = ''; 

dass die Fehlermeldungen und verläßt den Eingang Grenze unterdrückt.

Eigentlich sind die jQuery Plugin Dokumentation verweist auf ein Beispiel, das dies tut, so dass ich denke, es ist die anerkannte Methode ist ..

Customized Nachrichtenanzeige: Keine für die erforderliche Methode angezeigten Meldungen, nur für Typ-Fehler (wie falsches E-Mail-Format); Eine Zusammenfassung wird oben angezeigt ("Sie haben 12 Felder verpasst. Sie wurden unten hervorgehoben.")

Answer 3

All diese Lösungen scheinen komplizierter zu sein, als sie sein müssen. Hier ist eine einfache Lösung. .error wird standardmäßig zu ungültigen Feldern hinzugefügt. Also, erste, was wir tun müssen, ist Stil, damit er die Grenze und Hintergrund zu verschiedenen Rottönen ändert:

.error { 
    border-color: #cd0a0a !important; 
    background: #fef1ec !important; 
} 

Dann in Ihrem JavaScript:

$(function() { 
    $("#donate_form").validate({ 
     errorPlacement: $.noop 
    }); 
}); 

Die errorPlacement Option ist, wie die Mit dem Plugin validate können Sie die Art und Weise überschreiben, in der die Fehlermeldung ausgegeben wird. In diesem Fall machen wir einfach nichts, und somit wird keine Fehlermeldung erzeugt.

Answer 4

Sie können nur die Fehlermeldung in errorPlacement extrahieren: und hängen Sie ihn an, was auch immer Sie mögen, wie folgt aus:

errorPlacement: function(error, element) { 
    $('#error-div').html(error[0].innerHTML)//<-error[0].innerHTML is the error msg. 
} 

Answer 5

Versuchen:

$(function() { 
    $("#donate_form").validate({ 
     errorPlacement: $.noop 
    }); 
});