wie positioniert Jquery validate () - Fehlermeldung an der Seite von meinem text input

Wie Sie sehen werden in meinem code bin ich schon mit der errorPlacement Methode. Zuerst habe ich versucht über eine if-else-Anweisung innerhalb der Methode und die Fehlermeldung würde dann wenigstens zeigen, aber nur unter dem Eingang, nicht an der Seite wie ich es will. Da habe ich 6 Eingänge zu testen, ich bin mit der switch-Anweisung, die nicht funktioniert für mich. Ich habe einige css angewendet, um die divs, dass die Eingänge in, ich weiß nicht, ob das stört, wo die Nachricht hingeht oder was.

HTML

<div id ="column1">
             <label>Name of Show</label><input type="text" name="performance" id="performance" /> 

             <label>Name of location</label> <input type="text" name="location" id="location"/>  

            <label>Date</label> <input type="text" id="date" name="date"/> 
</div>

         <div id="column2">

              <label>Time</label><input type="text" id="time" name="time"/>

              <label># of Volunteers Needed</label><input type="text" id="guests" name="guests"/>

              <label>Cover</label><input type="text" id="price" name="price"/>

        </div>

JS   

//this is just the error placement block, the other validate() code is working fine and omitted

errorPlacement: function(error, element){

                               switch(element)
                                         {
                                    case element.attr("name") === 'performance': 
                                               error.insertAfter( $("#performance") );
                                                break;
                                         case element.attr("name") === 'location':
                                                    error.insertAfter( $("#location") );
                                                     break;
                                             case element.attr("name") === 'date':
                                                        error.insertAfter( $("#date") );
                                                        break;
                                                case element.attr("name") === 'time':
                                                            error.insertAfter( $("#time") );
                                                            break;
                                                     case element.attr("name") === 'guests':
                                                          error.insertAfter( $("#guests") );
                                                                break;
                                                     case element.attr("name") === 'price':
                                                           error.insertAfter( $("#price") );
                                                                    break;
                                                                default:
                                              //nothing
                                            }

                               },

InformationsquelleAutor Spilot | 2013-10-17

jquery jquery-validate

12

Code:
```
errorPlacement: function (error, element) {
    switch (element) {
        case element.attr("name") === 'performance':
            error.insertAfter($("#performance"));
            break;
        case element.attr("name") === 'location':
            error.insertAfter($("#location"));
            break;
        case element.attr("name") === 'date':
            error.insertAfter($("#date"));
            break;
        case element.attr("name") === 'time':
            error.insertAfter($("#time"));
            break;
        case element.attr("name") === 'guests':
            error.insertAfter($("#guests"));
            break;
        case element.attr("name") === 'price':
            error.insertAfter($("#price"));
            break;
        default:
            //nothing
    }
},
```
Dein code ist unnötig wiederholende, um das Mindeste zu sagen, und ein wenig überflüssig.

error.insertAfter(element) ist bereits der Standard und es allgemein gilt für alle Felder automatisch. Es gibt keine Notwendigkeit, über-fahren Sie dieses, es sei denn, Sie wollen etwas anderes tun.

Dies ist die Standard - errorPlacement Funktion:
```
errorPlacement: function(error, element) {
    error.insertAfter(element); //<- the default
},
```
error - die label - Objekt mit der Fehlermeldung.

element - input-Objekt mit der Fehlermeldung.

Wie Sie sehen können, Sie müssen nicht angeben errorPlacement überhaupt, wenn Sie einfach wollen, dass jeder-Fehler-Nachrichten eingefügt werden soll, nachdem jedes element.

Sehen dieses jsFiddle zeigt die Standard-Fehlermeldung Platzierung:

http://jsfiddle.net/85xwh/

Können Sie "un-Kommentar" die errorPlacement Abschnitt und sehen, dass das Verhalten ist identisch:

http://jsfiddle.net/85xwh/1/

Wenn Sie nicht immer die erwartete Nachricht die Platzierung, es ist entweder so, weil Sie Ihre CSS-Bewegung ist es, Ihre HTML-layout ist blockiert oder einwickeln, oder eine Kombination aus beiden. Sie haben gezeigt, nicht genug code für mich zu duplizieren, etwas sinnvolles.

Jedoch, wenn Sie wollen, um zu versuchen, etwas CSS, um nur die Fehlermeldungen, so verwenden, vorausgesetzt, Sie sind mit dem Standard-error-container <label>, und der Standard-Fehler-Klasse .error...
```
label.error {
   /* my custom css */
}
```
InformationsquelleAutor Sparky
5

Bekomme ich die oben genannten Fragen code in mein Projekt,sinnvoll aber etwas verändert, als es in der Frage!

Für zwei input-tags (hatte ich eigentlich benutzt, dass 2 input-tags mit Twitter Bootstrap, dateTimePicker plugin) habe ich eine zusätzliche div unten die zwei Datumsauswahl-Felder, mit zwei überspannt mit zwei verschiedenen IDs (jqv_msg3, jqv_msg4) und legen Sie das folgende als meine jQuery Validation script:
```
errorElement: 'p',
errorClass: 'jq_err_msg text-danger',
errorPlacement: function(error, element) {
    switch (element.attr("name")) {
        case 'datePicker1':
            error.insertAfter($("#jqv_msg3"));
            break;
        case 'datePicker2':
            error.insertAfter($("#jqv_msg4"));
            break;
        default:
            error.insertAfter(element);
    }
}
```
Also der obige code produziert, P tag mit Klasse jq_err_msg text-danger aber für Elemente, die haben datePicker1 und datePicker2 setzt es die Fehlermeldungen in der Seite, die div habe ich gestellt, und nach jedem der beiden spans mit den IDs der jqv_msg3 und jqv_msg4 !!!

Also ich könnte statt der Fehlermeldungen, wo ich beabsichtigte, in dieser Art und Weise, speziell für den einzelnen input-ich muss es tun! 😀

Hinweis:

Aber bitte behalte das im Hinterkopf, ich habe verändert die Switch - Anweisung geeignet zu sein für die Anforderung und auch die Art, wie es funktioniert.

InformationsquelleAutor Randika Vishman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.