jQuery-Validierung: Standardfehlermeldung ändern

363

Gibt es eine einfache Möglichkeit, die Standardfehlerwerte im jQuery-Validierungs-Plugin zu ändern ?

Ich möchte nur die Fehlermeldungen neu schreiben, um sie persönlicher für meine App zu gestalten. Ich habe viele Felder, daher möchte ich die Meldung nicht einzeln für Feld x festlegen. Ich weiß, dass ich das tun kann!

Kevin Brown
quelle

Antworten:

732

Fügen Sie diesen Code in einer separaten Datei / einem Skript hinzu, die bzw. das nach dem Validierungs-Plugin enthalten ist, um die Nachrichten zu überschreiben. Bearbeiten Sie sie nach Belieben :)

jQuery.extend(jQuery.validator.messages, {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
    minlength: jQuery.validator.format("Please enter at least {0} characters."),
    rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
    range: jQuery.validator.format("Please enter a value between {0} and {1}."),
    max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
    min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
Nick Craver
quelle
31
Hat super funktioniert. Ich habe gerade hinzugefügt: $ .extend ($. Validator.messages, {erforderlich: "Erforderlich"});
Ravi Ram
6
Ich habe dies als schnelle Lösung für ein mehrsprachiges Formular verwendet: if ($ ('body'). Attr ('lang') == "es") {jQuery.extend ...};
Heraldmonkey
5
@NickCraver, wollte nur sagen, dass ich nie erwartet hätte, mit dieser Frage so viele Upvotes zu generieren ... und gut gemacht für eine zeitnahe und schnelle Antwort!
Kevin Brown
3
Funktioniert leider nicht. Es wird keine Nachricht angezeigt, nur die erforderliche Nachricht wird angezeigt, obwohl ich die Mindestlänge verwendet habe.
Pratik
2
Können wir den Namen des Formularelements in die Fehlermeldung aufnehmen? Anstelle nur einer allgemeinen Nachricht. dh Anmeldefeld ist erforderlich anstelle von Dieses Feld ist erforderlich
Musaddiq Khan
239

Sie können Ihre eigenen Nachrichten im Validierungsaufruf angeben. Wenn Sie diesen Code aus dem Anmeldeformular "Remember the Milk" in der Dokumentation zum Validierungs-Plugin ( http://jquery.bassistance.de/validate/demo/milk/ ) entfernen und abkürzen , können Sie ganz einfach Ihre eigenen Nachrichten angeben:

var validator = $("#signupform").validate({
    rules: {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            minlength: 2,
            remote: "users.php"
        }
    },
    messages: {
        firstname: "Enter your firstname",
        lastname: "Enter your lastname",
        username: {
            required: "Enter a username",
            minlength: jQuery.format("Enter at least {0} characters"),
            remote: jQuery.format("{0} is already in use")
        }
    }
});

Die vollständige API für validate (...): http://jqueryvalidation.org/validate

Steven
quelle
7
Vielen Dank für die Eingabe, aber wenn Sie die Frage genauer lesen, frage ich Sie, wie Sie die Standardeinstellungen ändern können. Ich weiß, dass ich eindeutige Nachrichten angeben kann.
Kevin Brown
41
Nur einspringen - das war hilfreich für mich, auch wenn ich die Frage nicht genau getroffen habe.
Brien Malone
1
Ja, das scheint tatsächlich eine bessere Idee zu sein, als die Standardeinstellungen zu ändern, obwohl das OP ursprünglich darum gebeten hat
Roger
2
@ LisaCerilli Ich hatte das gleiche, behoben, indem ich jQuery.format("...zujQuery.validator.format("...
Lehel
1
Ich weiß, dass dies alt ist, aber der erste Link ist unterbrochen.
Akousmata
87

Das hat bei mir funktioniert:

$.validator.messages.required = 'required';
Josh
quelle
$ .validator.messages.maxlength = jQuery.validator.format ("Bitte geben Sie nicht mehr als {0} Zeichen ein."); funktioniert nicht. Ich empfehle stattdessen die Verwendung der Nick Cravers-Lösung.
Vidar Vestnes
1
@VidarVestnes Die Lösung funktioniert auch für Ihr Szenario. Sie geben nur die $.validator.messages.maxlength = "Please enter no more than {0} characters.";
Formatzeichenfolge an
48

Das hat bei mir funktioniert:

// Change default JQuery validation Messages.
$("#addnewcadidateform").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            email: "required email",
        },
        messages: {
            firstname: "Enter your First Name",
            lastname: "Enter your Last Name",
            email: {
                required: "Enter your Email",
                email: "Please enter a valid email address.",
            }
        }
    })
Mahmoud Fadel
quelle
Beachten Sie, dass auch wenn diese Antwort für jqueryValidation und nicht für jqueryFileUpload gilt, messagesdie $().fileuploadFunktion auch Optionen enthält .
Xavier Portebois
39

Da wir bereits JQuery verwenden, können Seitengestalter dem Markup benutzerdefinierte Nachrichten anstelle des Codes hinzufügen:

<input ... data-msg-required="my message" ...

Oder eine allgemeinere Lösung mit einem einzigen kurzen Daten-Nachrichtenattribut für alle Felder:

<form id="form1">
    <input type="text" id="firstName" name="firstName" 
        data-msg="Please enter your first name" />
    <br />
    <input type="text" id="lastName" name="lastName" 
        data-msg="Please enter your last name" />
    <br />
    <input type="submit" />
</form>

Und der Code enthält dann so etwas:

function getMsg(selector) {
    return $(selector).attr('data-msg');
}

$('#form1').validate({
    // ...
    messages: {
        firstName: getMsg('#firstName'),
        lastName: getMsg('#lastName')
    }
    // ...
});
user1207577
quelle
Dies ist eine großartige Strategie, insbesondere wenn Sie eine dynamische Nachricht benötigen, die nicht in Ihren JS-Dateien enthalten ist ...
Charles Harmon
@ user1207577, Ja, wir können die benutzerdefinierten Nachrichten festlegen, aber wie können wir die Nachricht mit der minimalen und maximalen Länge anzeigen. Ich meine, wenn wir den benutzerdefinierten Wert festlegen, werden die Min- und Max-Meldungen nicht angezeigt. Irgendeine Idee?
Naren Verma
22

Eine andere mögliche Lösung besteht darin, die Felder zu durchlaufen und jedem Feld dieselbe Fehlermeldung hinzuzufügen.

$('.required').each(function(index) {
  $(this).rules("add", {
    messages: {
      required: "Custom error message."
   }
  });
});
Ganske
quelle
1
Diese Lösung war genau das, wonach ich gesucht habe ... In meinem Szenario hat jedes Formularfeld eine Beschriftung, daher finde ich die entsprechende Beschriftung und stelle sie der Nachricht voran, sodass am Ende "Vorname erforderlich" steht. Sehr schön, Ganske.
Tjans
1
+1 Während alle anderen Antworten gültig sind, ist dies die Syntax, nach der ich gesucht habe.
Scott.korin
6

Anstatt den Plugin-Quellcode zu ändern, können Sie eine zusätzliche js-Datei in dem Format wie im Download-Lokalisierungsordner einfügen und diese nach dem Laden der Datei validation.js einfügen

jQuery.extend(jQuery.validator.messages, {
    required: ...,
    maxlength: jQuery.validator.format(...),
    ...
});
Jitter
quelle
Ist es nicht. Es ist technisch das gleiche wie Ihre Antwort. Ich habe meinen Kommentar zur alten Version Ihrer Antwort gepostet. Dann schrieb ich meine eigene Antwort. Alles ohne die Seite ständig neu zu laden. Daher habe ich nur gesehen, dass Sie die Antwort bearbeitet haben, als Sie Ihren Kommentar überprüft haben
Jitter
5

@Josh: Sie können Ihre Lösung mit übersetzten Nachrichten aus Ihrem Ressourcenpaket erweitern

<script type="text/javascript">
    $.validator.messages.number = '@Html.Raw(@Resources.General.ErrorMessageNotANumber)';
</script>

Wenn Sie diesen Codeteil in Ihre _Layout.cshtml (MVC) einfügen, ist er für alle Ihre Ansichten verfügbar

Krolock
quelle
4

Ich hätte nie gedacht, dass dies so einfach sein würde. Ich arbeitete an einem Projekt, um eine solche Validierung durchzuführen.

Die folgende Antwort ist eine große Hilfe für jemanden, der die Validierungsnachricht ohne großen Aufwand ändern möchte.

Bei den folgenden Ansätzen wird anstelle von "Dieses Feld" der "Platzhaltername" verwendet.

Sie können Dinge leicht ändern

   // Jquery Validation   
   $('.js-validation').each(function(){

       //Validation Error Messages 

       var validationObjectArray = [];

       var validationMessages = {};

       $(this).find('input,select').each(function(){  // add more type hear

          var singleElementMessages = {};

          var fieldName = $(this).attr('name');

          if(!fieldName){  //field Name is not defined continue ;
              return true;
          }


          // If attr data-error-field-name is given give it a priority , and then to placeholder and lastly a simple text

          var fieldPlaceholderName = $(this).data('error-field-name') || $(this).attr('placeholder') || "This Field";

          if( $( this ).prop( 'required' )){

              singleElementMessages['required'] = $(this).data('error-required-message') || $(this).data('error-message')  || fieldPlaceholderName + " is required";

          }

          if( $( this ).attr( 'type' ) == 'email' ){

              singleElementMessages['email'] = $(this).data('error-email-message') || $(this).data('error-message')  || "Enter valid email in "+fieldPlaceholderName;

          }       



          validationMessages[fieldName] = singleElementMessages;

       });


       $(this).validate({
          errorClass   : "error-message",
          errorElement : "div",
          messages     : validationMessages  
       });  
   });  
Sanjeev
quelle
Vielen Dank für das Teilen. Die Verwendung von "errorClass" und "errorElement" ist genial! Ich kann jetzt das Styling und den Ort meiner Fehlermeldungen anwenden, die aus der Validierung erstellt wurden!
justdan23
3

Die neueste Version enthält einige nette Inline-Dinge, die Sie tun können.

Wenn es sich um ein einfaches Eingabefeld handelt, können Sie das Attribut data-validation-error-msgwie folgt hinzufügen :

data-validation-error-msg="Invalid Regex"

Wenn Sie etwas Schweres benötigen, können Sie die Dinge mithilfe einer Variablen mit allen Werten, die an die Validierungsfunktion übergeben werden, vollständig anpassen. Weitere Informationen finden Sie unter diesem Link - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

Stephen Sprinkle
quelle
1
Dies ist ein anderes Plugin als das jQuery Validation Plugin, nach dem das OP gefragt hat. Keine schlechte Wahl, insbesondere wenn Sie durch das Platzieren validierungsbezogener Daten (Regeln, Nachrichten) im HTML angesprochen werden (das jQuery Validation Plugin geht den umgekehrten Weg und verwendet dafür Javascript). Um eine weitere Alternative für den Datensatz zu erwähnen, ist Parsley.js ein weiteres häufig verwendetes und voll funktionsfähiges Validierungs-Plugin, das auf HTML-Attributen basiert.
Endre Both
2

Verwenden Sie zum Entfernen aller Standardfehlermeldungen

$.validator.messages.required = "";
Dangel
quelle
1
Wie geht das für einen bestimmten Bereich?
151291
1

Benutzerdefinierte Fehlermeldung jQuery Form Validation -tutsmake

Demo

$(document).ready(function(){
  $("#registration").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },      
      phone: {
        required: true,
        digits: true,
        minlength: 10,
        maxlength: 10,
      },
      password: {
        required: true,
        minlength: 5,
      }
    },
    messages: {
      firstname: {
      required: "Please enter first name",
     },      
     lastname: {
      required: "Please enter last name",
     },     
     phone: {
      required: "Please enter phone number",
      digits: "Please enter valid phone number",
      minlength: "Phone number field accept only 10 digits",
      maxlength: "Phone number field accept only 10 digits",
     },     
     email: {
      required: "Please enter email address",
      email: "Please enter a valid email address.",
     },
    },
  
  });
});
<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Validation Using validator()</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<style>
  .error{
    color: red;
  }
  label,
  input,
  button {
    border: 0;
    margin-bottom: 3px;
    display: block;
    width: 100%;
  }
 .common_box_body {
    padding: 15px;
    border: 12px solid #28BAA2;
    border-color: #28BAA2;
    border-radius: 15px;
    margin-top: 10px;
    background: #d4edda;
}
</style>
</head>
<body>
<div class="common_box_body test">
  <h2>Registration</h2>
  <form action="#" name="registration" id="registration">
 
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"><br>
 
    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"><br>
 
    <label for="phone">Phone</label>
    <input type="text" name="phone" id="phone" placeholder="8889988899"><br>  
 
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="[email protected]"><br>
 
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder=""><br>
 
    <input name="submit" type="submit" id="submit" class="submit" value="Submit">
  </form>
</div>
 
</body>
</html>

Entwickler
quelle
-2

Anstelle dieser benutzerdefinierten Fehlermeldungen können wir den Typ des Textfelds angeben.

Beispiel: Setzen Sie den Feldtyp auf type = 'email'

Dann identifiziert das Plugin das Feld und validiert es korrekt.

Vidura
quelle
er bittet nicht darum, es richtig zu validieren, er bittet darum, die Nachrichten neu zu schreiben ... "Ich möchte nur die Fehlermeldungen umschreiben, um persönlicher für meine App zu sein"
Benoit