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

Vous pouvez spécifier vos propres messages dans l'appel validate. Levée et abréviation de ce code à partir du formulaire D'inscription Remember The Milk utilisé dans la documentation du plugin 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.",
            }
        }
    })

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

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

Ou, une solution plus générale utilisant un seul attribut data-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 à faire une boucle 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 dans le format comme ceux du dossier de localisation des téléchargements et inclure celui-ci après le chargement de la validation.js

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

La nouvelle version a de belles choses en ligne que vous pouvez faire.

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

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

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

@ Josh: vous pouvez développer votre solution avec le Message traduit de votre bundle 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) il est disponible pour toutes vos vues

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

La réponse ci-dessous sera d'une grande aide à celui qui veut changer 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  
       });  
   });  

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

$.validator.messages.required = "";

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

Ex: définir le type du champ À type = 'email'

Ensuite, le plugin identifiera le champ et validera correctement.