jQuery-Validierung: Standardfehlermeldung ändern

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!

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}.")
});

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

Das hat bei mir funktioniert:

$.validator.messages.required = 'required';

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.",
            }
        }
    })

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')
    }
    // ...
});

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."
   }
  });
});

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(...),
    ...
});

@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

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  
       });  
   });  

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

Verwenden Sie zum Entfernen aller Standardfehlermeldungen

$.validator.messages.required = "";

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="john@doe.com"><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>

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.