CODEWITHSUNDEEP
jqueryvalidationlocalization
Peter Bierman
Peter Bierman

Reputation: 383

jQuery validation plugin localize custom messages

I'm using the jquery validation plugin for my registration form. This form has to be available in multiple languages. I've found the answer how to localize the default messages here: JQuery Validation Internationalization Problem

But I'm having trouble localizing my custom messages.

My validate code is as follows:

registrationForm.validate({
        onkeyup: false,
        errorClass: 'error',
        validClass: 'valid',
        rules: {
            name: { required: true, minlength: 3 },
            email: { required: true, email: true },
            password: { password: "#name" },
            password_confirm: { required: true, equalTo: "#password" }
        },
        messages: {
            password_confirm: {
                required: "Repeat your password",
                minlength: jQuery.format("Enter at least {0} characters"),
                equalTo: "Enter the same password as above"
            }
        }
})

The problem lies in the password_confirm.required message.

I've tried this:

jQuery.extend(jQuery.validator.messages, {
    required: "Dit is een verplicht veld.",
    remote: "Controleer dit veld.",
    email: "Vul hier een geldig e-mailadres in.",
    url: "Vul hier een geldige URL in.",
    date: "Vul hier een geldige datum in.",
    dateISO: "Vul hier een geldige datum in (ISO-formaat).",
    number: "Vul hier een geldig getal in.",
    digits: "Vul hier alleen getallen in.",
    creditcard: "Vul hier een geldig creditcardnummer in.",
    equalTo: "Vul hier dezelfde waarde in.",
    accept: "Vul hier een waarde in met een geldige extensie.",
    maxlength: jQuery.format("Vul hier maximaal {0} tekens in."),
    minlength: jQuery.format("Vul hier minimaal {0} tekens in."),
    rangelength: jQuery.format("Vul hier een waarde in van minimaal {0} en maximaal {1} tekens."),
    range: jQuery.format("Vul hier een waarde in van minimaal {0} en maximaal {1}."),
    max: jQuery.format("Vul hier een waarde in kleiner dan of gelijk aan {0}."),
    min: jQuery.format("Vul hier een waarde in groter dan of gelijk aan {0}."),
    password_confirm: {
                            required: "Herhaal uw wachtwoord",
                            minlength:jQuery.format("Vul hier maximaal {0} tekens in."),
                            equalTo: "Vul hier hetzelfde wachtwoord als hierboven in."
                    }
    }
});

but to no avail. Can someone point me in the right direction?

Upvotes: 2

Views: 5125

Answers (1)

Peter Bierman
Peter Bierman

Reputation: 383

So I finally figured out how to do this. The solution (or at least my solution) was to use the add rules method for the validation plugin. First add al default messages, then use the internationalization plugin to load the file that has the custom internationalized messages.

Relevant code blocks,

index.php:

...
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">$.localise('validation/messages', {language: "<?=$language?>"});</script>
...

script.js:

$(document).ready(function() {
    var registrationForm = $('form:first');
    registrationForm.validate({
        onkeyup: false,
        errorClass: 'error',
        validClass: 'valid',
        rules: {
            name: { required: true, minlength: 3 },
            email: { required: true, email: true },
            password: { password: "#name" },
        }
     });

    addCustomMessages();
});

messages-en-US.js:

function addCustomMessages()
{
   $("#password_confirm").rules("add", {
    required: true,
    equalTo: "#password",
    messages: {
        required: "Repeat your password",
        minlength: jQuery.format("Enter at least {0} characters"),
        equalTo: "Enter the same password as above"
    }
   });
}

messages-nl-NL.js: 

jQuery.extend(jQuery.validator.messages, {
    required: "Dit is een verplicht veld.",
    remote: "Controleer dit veld.",
    email: "Vul hier een geldig e-mailadres in.",
    url: "Vul hier een geldige URL in.",
    date: "Vul hier een geldige datum in.",
    dateISO: "Vul hier een geldige datum in (ISO-formaat).",
    number: "Vul hier een geldig getal in.",
    digits: "Vul hier alleen getallen in.",
    creditcard: "Vul hier een geldig creditcardnummer in.",
    equalTo: "Vul hier dezelfde waarde in.",
    accept: "Vul hier een waarde in met een geldige extensie.",
    maxlength: jQuery.format("Vul hier maximaal {0} tekens in."),
    minlength: jQuery.format("Vul hier minimaal {0} tekens in."),
    rangelength: jQuery.format("Vul hier een waarde in van minimaal {0} en maximaal {1} tekens."),
    range: jQuery.format("Vul hier een waarde in van minimaal {0} en maximaal {1}."),
    max: jQuery.format("Vul hier een waarde in kleiner dan of gelijk aan {0}."),
    min: jQuery.format("Vul hier een waarde in groter dan of gelijk aan {0}.")
});

jQuery.extend(jQuery.validator.passwordRating.messages, {
    "similar-to-username": "Lijkt te veel op naam",
    "too-short": "Te kort",
    "very-weak": "Erg zwak",
    "weak": "Zwak",
    "good": "Goed",
    "strong": "Sterk"
});

function addCustomMessages()
{
   $("#password_confirm").rules("add", {
    required: true,
    equalTo: "#password",
    messages: {
        required: "Herhaal uw wachtwoord",
        minlength: jQuery.format("Enter at least {0} characters"),
        equalTo: "Enter the same password as above"
    }
    });
}

Upvotes: 1

Related Questions