Validation jQuery: modifier le message d'erreur par défaut

Existe-t-il un moyen simple de modifier les valeurs d'erreur par défaut dans le plug - in de validation jQuery ?

Je veux juste réécrire les messages d'erreur pour être plus personnels avec mon application - j'ai beaucoup de champs, donc je ne veux pas définir le message individuellement pour le champ x ... Je sais que je peux le faire!

Ajoutez ce code dans un fichier / script séparé inclus après le plugin de validation pour remplacer les messages, modifiez à volonté :)

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

Vous pouvez spécifier vos propres messages dans l'appel de validation. En levant et en abrégeant ce code à partir du formulaire d'inscription Remember the Milk utilisé dans la documentation du plug-in de validation ( http://jquery.bassistance.de/validate/demo/milk/ ), vous pouvez facilement spécifier vos propres messages:

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

L'API complète pour valider (...): http://jqueryvalidation.org/validate

Cela a fonctionné pour moi:

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

Cela a fonctionné pour moi:

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

Comme nous utilisons déjà JQuery, nous pouvons laisser les concepteurs de pages ajouter des messages personnalisés au balisage plutôt qu'au code:

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

Ou, une solution plus générale utilisant un seul attribut de données-msg court sur tous les champs:

<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>

Et le code contient alors quelque chose comme ceci:

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

$('#form1').validate({
    // ...
    messages: {
        firstName: getMsg('#firstName'),
        lastName: getMsg('#lastName')
    }
    // ...
});

Une autre solution possible consiste à boucler sur les champs, en ajoutant le même message d'erreur à chaque champ.

$('.required').each(function(index) {
  $(this).rules("add", {
    messages: {
      required: "Custom error message."
   }
  });
});

Au lieu de changer le code source du plugin, vous pouvez inclure un fichier js supplémentaire au format comme ceux du dossier de localisation des téléchargements et l'inclure après le chargement du fichier validation.js

jQuery.extend(jQuery.validator.messages, {
    required: ...,
    maxlength: jQuery.validator.format(...),
    ...
});

@Josh: vous pouvez étendre votre solution avec le message traduit de votre ensemble de ressources

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

Si vous mettez cette partie de code dans votre _Layout.cshtml (MVC), elle est disponible pour toutes vos vues

Je n'aurais jamais pensé que ce serait aussi facile, je travaillais sur un projet pour gérer une telle validation.

La réponse ci-dessous sera d'une grande aide pour celui qui souhaite modifier le message de validation sans trop d'effort.

Les approches ci-dessous utilisent le "Nom de l'espace réservé" à la place de "Ce champ".

Vous pouvez facilement modifier les choses

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

La dernière version propose de belles fonctionnalités en ligne.

S'il s'agit d'un simple champ de saisie, vous pouvez ajouter l'attribut data-validation-error-msgcomme ceci -

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

Si vous avez besoin de quelque chose d'un peu plus lourd, vous pouvez entièrement personnaliser les choses en utilisant une variable avec toutes les valeurs qui sont passées dans la fonction de validation. Référencez ce lien pour plus de détails - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

Pour supprimer tous les messages d'erreur par défaut, utilisez

$.validator.messages.required = "";

Message d'erreur personnalisé de validation de formulaire jQuery -tutsmake

Démo

$(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>

au lieu de ces messages d'erreur personnalisés, nous pouvons spécifier le type du champ de texte.

Ex: définissez le type du champ dans type = 'email'

alors le plugin identifiera le champ et validera correctement.