ParsleyJS - Localization with data-parsley -constraint-message

I am currently using

data-parsley-`constraint`-message="English sentence goes here"

      

but now that I am working on adding localization these posts will never be translated using the i18n library as they are common.

Is there a way to add something like

data-parsley-`constraint`-message-fr="Francais francais francais"

      

or is there some way to do it through JS?

Specifically, I am using data-parsley-required-message = ""

+3


source to share


1 answer


Why don't you use Parsley localization instead of defining input messages?

I suggest you download the localization you need from source . After that, as per the docs, you can load i18n in front of the plugin, for example:

<script src="i18n/fr.js"></script>
<script src="i18n/it.js"></script>
<script src="parsley.min.js"></script>
<script type="text/javascript">
    window.ParsleyValidator.setLocale('fr');
</script>

      

Or you can load i18n after the plugin (in this case it will read the last loaded localization - in the next example it will be Italian), for example:

<script src="parsley.min.js"></script>
<script src="i18n/fr.js"></script>
<script src="i18n/it.js"></script>

      

In my projects, I usually load the required localization based on a Cookie or Session variable:

<script src="parsley.min.js"></script>
<script src="i18n/"<?= echo $lang ?>".js"></script>

      

When using any of the parameters, you don't need to add data-parsley- constraint

-message
to every input. And when you need to change the message, you can do so in the localization file.

In conclusion, if you need custom validators, you can check the docs to see how you can define different localizations.


UPDATE



This solves the OP's problem by modifying the plugin source code

You can edit in your parsley.js a method called _getErrorMessage

(line 1264 with 2.0.4) that looks like this:

_getErrorMessage: function (fieldInstance, constraint) {
    var customConstraintErrorMessage = constraint.name + 'Message';
    if ('undefined' !== typeof fieldInstance.options[customConstraintErrorMessage])
        return window.ParsleyValidator.formatMessage(fieldInstance.options[customConstraintErrorMessage], constraint.requirements);
    return window.ParsleyValidator.getErrorMessage(constraint);
},

      

Something like that:

_getErrorMessage: function (fieldInstance, constraint) {
    //added
    var locale = window.ParsleyValidator.locale;
    var namespace = fieldInstance.options.namespace;
    var customConstraintErrorMessage = namespace  + constraint.name + '-' + locale;

    if (fieldInstance.$element.attr(customConstraintErrorMessage)) {
        // treat parameters
        if (fieldInstance.$element.attr(customConstraintErrorMessage).indexOf("%s") !== -1)
            return window.ParsleyValidator.formatMessage(fieldInstance.$element.attr(customConstraintErrorMessage), constraint.requirements);
        return fieldInstance.$element.attr(customConstraintErrorMessage);
    }

    // original
    var customConstraintErrorMessage = constraint.name + 'Message';
    if ('undefined' !== typeof fieldInstance.options[customConstraintErrorMessage])
        return window.ParsleyValidator.formatMessage(fieldInstance.options[customConstraintErrorMessage], constraint.requirements);
    return window.ParsleyValidator.getErrorMessage(constraint);
},

      

With this, you can specify messages directly on the input using sintax data-parsley- constraint

-locale

. Here's an example:

<input type="text" name="name" value="" data-parsley-required="true"
    data-parsley-required-en="Name is required"
    data-parsley-required-pt="O nome é obrigatório" />
<input type="number" name="phone" value=""
    data-parsley-minlength="9"
    data-parsley-minlength-en="Phone length must be equal to %s"
    data-parsley-minlength-pt="O telefone deverá ter %s digitos" />

      

If you need to use some kind of constraints (in the above example there is data-parsley-minlength

which is a variable), you can use %s

inside a message. This will be replaced with the correct value.

Before you can bind the parsley to your form, you need to set the locale you want to use (be careful: you need to include the javascript file relative to the locale you are using, otherwise you will get an error, for example Error: pt is not available in the catalog

):

window.ParsleyValidator.setLocale('pt');
$("#myForm").parsley();

      

Below is a jsfiddle for demonstration. If you want to test, just setLocale('en')

see the posts in English.

+8


source







All Articles