web-dev-qa-db-fra.com

Comment changer le message de langage JQuery Validator

J'utilise le validateur JQuery de http://bassistance.de/jquery-plugins/jquery-plugin-validation/ . Comment puis-je faire en sorte que les messages soient personnalisés et non en anglais.

jqueryjquery-validate
19
Luis Alvarado

Fais-le comme ça:

$(document).ready(function() {
  $("form#login").validate({
    lang: 'en'  // or whatever language option you have.
  });
});

Si la langue que vous souhaitez fournir n'est pas l'une des langues par défaut, procédez comme suit:

$.tools.validator.localize("fi", {
    '*'          : 'Virheellinen arvo',
    ':email'     : 'Virheellinen sähköpostiosoite',
    ':number'    : 'Arvon on oltava numeerinen',
    ':url'       : 'Virheellinen URL',
    '[max]'      : 'Arvon on oltava pienempi, kuin $1',
    '[min]'      : 'Arvon on oltava suurempi, kuin $1',
    '[required]' : 'Kentän arvo on annettava'
});

  $("form#login").validate({
    lang: 'fi'
  });

Voir ces instructions pour plus.

16
Dave Sag

Si vous regardez dans le répertoire "localisation", vous pourrez trouver différents fichiers .js contenant des messages d'erreur dans différentes langues . [Quelque chose comme "messages_XX.js"]

Choisissez le fichier de la langue dont vous avez besoin et ajoutez simplement la ligne suivante dans la balise, après l’inclusion de jquery.validate.js

<script type="text/javascript" src="localization/messages_XX.js"></script>
31
andre_lost

La meilleure méthode consiste à étendre le plugin comme celui-ci en cas de besoin

$.extend($.validator.messages, {
    required: "my required message",
    ....
});
6
astroanu

Voici votre structure JSON dans votre script de validation initial comme Alex a : 

   rules: {
        accntTypeCL: {
            required: true,
        },
        accntNoCL: {
            required: true,
            minlength: 19,
            numberDash: true,
        }
    },                      
    messages : {
        accntTypeCL : {
            required : Messages.ERR_TEST,
        },
        accntNoCL : {
            required : Messages.ERR_TEST,
            numberDash : Messages.ERR_TEST,
            minlength : Messages.ERR_TEST2,
        },
    }

//This would be in your messages.js file... But you'll need to make sure you are using a Java backend or something that will pull the messages.js correctly
//For IBM worklight this worked great       

    Messages = {
// Add here your messages for the default language. 
// Generate a similar file with a language suffix containing the translated messages

ERR_TOPLEVEL : '<span role=\"presentation\">One or more of the required fields was left blank or is invalid.<\/span>',
//Test Messages for tracing
ERR_TEST: 'This be the test yar!',
ERR_TEST2: 'This be the test2 yar!'
};

De cette façon, vous pouvez réutiliser les mêmes fonctions, les mêmes méthodes supplémentaires et les mêmes types d’erreur et utiliser simplement le fichier messages.js approprié en fonction de la langue du code HTML à détecter dans le navigateur ou quelle que soit la méthode utilisée. Cette méthode particulière a bien fonctionné pour moi. 

5
isaac weathers

Regardez ma solution 

jQuery.extend(jQuery.validator.messages, {
        required: abp.localization.localize("FormValidationMessageRequired"),//"This field is required.",
        remote: "Please fix this field.",
        email: abp.localization.localize("FormValidationMessageEmail"),//"Please enter a valid email address.",
        url: abp.localization.localize("FormValidationMessageUrl"),//"Please enter a valid URL.",
        date: abp.localization.localize("FormValidationMessageDate"),//"Please enter a valid date.",
        dateISO: "Please enter a valid date (ISO).",
        number:  abp.localization.localize("FormValidationMessageNumber"),//"Please enter a valid number.",
        digits: "Please enter only digits.",
        creditcard: "Please enter a valid credit card number.",
        equalTo:  abp.localization.localize("FormValidationMessageDataEquals"),//"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(abp.localization.localize("FormValidationMessageMinlength")),//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(abp.localization.localize("FormValidationMessageMax")),//jQuery.validator.format("Please enter a value less than or equal to {0}."),
        min: jQuery.validator.format(abp.localization.localize("FormValidationMessageMin"))//jQuery.validator.format("Please enter a value greater than or equal to {0}.")
    });

et this func abp.localization.localize(Key) renvoie la chaîne localisée en fonction de la culture actuelle, cette fonction provient du cadre que j'ai utilisé appelé aspnetboilerplate

pour plus d'informations, voir ce débordement de pile - validation jQuery: modification du message d'erreur par défaut

3
Basheer AL-MOMANI

Utilisez l'objet messages.

Paires clé/valeur définissant custom messages. Key est le nom d'un element, évaluez le message à afficher pour cet élément. Au lieu d'une simple message une autre carte avec spécifique les messages pour chaque règle peuvent être utilisés . Remplace l'attribut title d'un élément ou le message par défaut pour le méthode (dans cet ordre). Chaque message peut être une chaîne ou un rappel. Le callback est appelé dans le cadre du validateur et avec la règle paramètres comme le premier et le élément en tant que deuxième argument, il doit renvoyer une chaîne à afficher en tant que message.

Exemple

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of [email protected]"
     }
   }
})

La source .

1
alex

Vous pouvez également mettre les messages d'erreur directement dans le balisage comme ceci:

<input required data-msg="Please fill this field">
<input data-rule-minlength="2" data-rule-maxlength="4" data-msg-minlength="At least two chars" data-msg-maxlength="At most fours chars">

Voir documentation

Si vous utilisez un type de plugin de localisation, vous pouvez déplacer les messages dans des fichiers séparés. Ici, j'utilise i18n-2 (module npm):

<input id="email" type="email" name="email" data-msg=__("pages.apply.form.email.errormsg.required"))

Ensuite, je mets mes fichiers de langue dans un dossier:

/locales
    da.json
    en.json

en.json

"pages": {
        "apply": {
            "subtitle": "Apply here",
            "form": {
                    "email": {
                        "title": "Email",
                        "placeholder": "Your email address",
                        "warning": "NB! DER AFSENDES EN MAIL HERTIL",
                        "errormsg": {
                            "required": "Enter a valid email address"
                        }
                    }
             }
        }
 }
1
olefrank