wake-up-neo.com

Platzierung von benutzerdefinierten Fehlerbezeichnungen mithilfe von jQuery validate

Ich möchte ein Fehleretikett (Nicht alle) an einem benutzerdefinierten Ort platzieren. jQuery bietet diese Option http://docs.jquery.com/Plugins/Validation/validate#toptions an, aber ich konnte nichts dazu finden, wie Sie eine bestimmte Fehlermeldung platzieren und den Standardspeicherort aller anderen nicht ändern.

Bitte überprüfen Sie alle Antworten unten. Dafür gibt es mehrere Lösungen. Danke euch allen!

40
chainwork

Wenn Sie also möchten, dass alle Ihre jQuery Validate-Fehlermeldungen an einer Stelle angezeigt werden, würden Sie die Option http://docs.jquery.com/Plugins/Validation/validate#toptions (Fehler suchen) auf dieser Seite verwenden .

Ich habe einige Antworten bemerkt, die hier beantwortet wurden, aber nicht beide Optionen.

1) Das heißt, wenn Sie für alle Ihre Fehler eine benutzerdefinierte Platzierung wünschen, können Sie Folgendes tun:

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo('#errordiv');
   }
});

2) Wenn Sie bestimmte Positionen für eine oder mehrere Fehlerbezeichnungen angeben möchten, können Sie dies tun.

errorPlacement: function(error, element) {
    if (element.attr("name") == "email" )
        error.insertAfter(".some-class");
    else if  (element.attr("name") == "phone" )
        error.insertAfter(".some-other-class");
    else
        error.insertAfter(element);
}
70
chainwork

Eigentlich ist es nicht notwendig, Javascript-Code zu verwenden, und ich habe eine einfache Lösung gefunden. Sie können JQuery Validate zwingen, den Validierungsfehler in einem DOM-Element zu platzieren.

Beispielsweise generiert JQuery einen Fehler wie folgt:

 <label for="firstname" generated="true" class="error">This field required.</label>

Sie können dieses Label dom-Element in Ihrem nächsten td-Block- oder li-Element oder wie gewünscht als Leerstelle platzieren.

<label for="firstname" generated="true" class="error"></label>

JQuery findet dieses leere Feld und fügt die Fehlermeldung für Sie ein.

Vergessen Sie nicht das Feld für im Label-Element!

38
Abdurrahman I.

Dies ist eine generischere Lösung, nicht spezifisch für die HTML-Struktur des OP. 

Wenn Sie nur ein bestimmtes Fehleretikett an einem anderen Ort wünschen, während der Rest in seiner Standardplatzierung verbleibt, versuchen Sie Folgendes:.

$("#myform").validate({
  errorPlacement: function(error, element) {
     if (element.attr("name") == "myFieldName") {

       // do whatever you need to place label where you want

         // an example
         error.insertBefore( $("#someOtherPlace") );

         // just another example
         $("#yetAnotherPlace").html( error );  

     } else {

         // the default error placement for the rest
         error.insertAfter(element);

     }
   }
});

Online-Dokumentation für die errorPlacement:-Option

15
Sparky

Ich habe herausgefunden, dass, wenn Sie mehr als zwei Bezeichnungen für benutzerdefinierte Fehler an verschiedenen Speicherorten haben, es zu einem verrückten Positionsfehler kommen kann, wenn Sie dies nicht tun und bei errorPlacement jeweils nur eine einzige Rückgabe durchführen. In diesem Beispiel habe ich zwei Ankreuzfelder, Fehlerbezeichnung, eine Kontrollkästchen, ein Etikett

HTML Quelltext

<p><label for="owner"><input  type="checkbox" name="option[]" id="owner" value="1"  validate="required:true, minlength:2" /> I am Owner of my Company</label></p>
<p><label for="agency"><input  type="checkbox" name="option[]" id="agency" value="1" /> I am an Agency</label>
<div id="errordiv"></div></p>
<hr>
<p><label for="agree"><input type="checkbox" name="agree" id="agree" value="1" required /> I Agree and I read the Privacy Polities and Use of Terms</label>
<div id="error_agree"></div>

Skript 

<script>
        $("#register_form").validate({ 
                        errorPlacement: function(error, element) {
                            if(element.attr("name") == "option[]"){
                                error.appendTo('#errordiv');
                                return;
                            }

                            if(element.attr("name") == "agree"){
                                    error.appendTo('#error_agree');
                                    return;
                            }else {
                                error.insertAfter(element);
                            }
                       }
                    });

        </script>
0
XMaster