web-dev-qa-db-fra.com

Validation jQuery: modification du 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 qu'ils soient plus personnels dans 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!

jqueryjquery-validate
344
Kevin Brown

Ajoutez ce code dans un fichier/script séparé inclus after le plugin de validation pour écraser les messages, éditez à 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}.")
});
706
Nick Craver

Vous pouvez spécifier vos propres messages dans l'appel de validation. Soulever et abréger ce code à partir du formulaire d’inscription Remember the Milk utilisé dans la documentation du plug-in Validation ( http://jquery.bassistance.de/validate/demo/milk/ ), vous pouvez facilement spécifier votre propre 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

221
Steven

Cela a fonctionné pour moi:

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

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

Comme nous utilisons déjà JQuery, nous pouvons laisser les concepteurs de page 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 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')
    }
    // ...
});
35
user1207577

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

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

Au lieu de changer le code source du plugin, vous pouvez inclure un fichier js supplémentaire au format tel que 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(...),
    ...
});
6
jitter

@Josh: Vous pouvez étendre votre solution avec 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.

5
Krolock

La version la plus récente contient des éléments en ligne sympas que vous pouvez utiliser.

S'il s'agit d'un simple champ de saisie, 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 entièrement personnaliser les choses en utilisant une variable avec toutes les valeurs qui sont transmises à la fonction validate. Référencez ce lien pour plus de détails - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

3
Stephen Sprinkle

Je n'avais 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 pour ceux qui souhaitent modifier le message de validation sans trop d'effort.

Les approches ci-dessous utilisent le "Nom d'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  
       });  
   });
3
sanjeev

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

$.validator.messages.required = "";
2
dangel

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="[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>
0
Developer