Spring and jQuery validation: How to use localized strings?

Question

Take this form as an example:

<form id="login_form" method="post" action="/rest/auth/auth">

    <div id="login_email" class="row margin-top-50">
        <div class="col-md-12" id="input_container">
            <input id="login_email_input" class="input_edit input_edit_img_width" type="email" name="email" th:placeholder="#{label.common_email}"></input>
            <img class="input_edit_img" src="/img/ic_login_user.png"></img>
        </div>
    </div>

    <div id="login_password" class="row margin-top-15">
        <div class="col-md-12" id="input_container">
            <input id="login_password_input" class="input_edit input_edit_img_width" type="password" name="password" th:placeholder="#{label.common_password}"></input>
            <img class="input_edit_img" src="/img/ic_login_pw.png"></img>
        </div>
    </div>

    <div class="row margin-top-15">
        <div class="col-md-12">
            <div class="checkbox_square">
                <input id="check_password_show" type="checkbox" value=""></input>
                <label for="check_password_show"></label>
                <span th:text="#{label.common_password_show}"></span>
            </div>
        </div>
    </div>

    <div class="row margin-top-15">
        <div class="col-md-12">
            <button id="login_submit" type="submit" class="btn btn-default btn-blue" th:text="#{label.login}"></button>
        </div>
    </div>

</form>

As you can see im using localized messages like th:placeholder="#{label.common_email}" for example.

I now want to use jQuery Validation and i really need to somehow use the localized strings from my messages.properties like something like this:

$("#login_form").validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        password: {
            required: true
            /*minlength: 6,
            maxlength: 20*/
        }
    },
    messages: {
        email: {
            required: "#{label.input_missing_email}",
            email: "#{label.input_missing_email_valid}"
        },
        password: {
            required: "#{label.input_missing_password}",
            minlength: "#{label.input_missing_password_valid}"
        }
    }
});

Is there any way how i can access my spring localization message from client side javascript? Or should i better use something different for validation if i have to use the localized strings?

Answer 1

You don't need to retrieve the your locale strings from your messages.properties at javascript level, You can do this easily if you keep your locale string in HTML only, Here what I will do:

HTML:

• Make separate <span> or <div> after each input (in case you want to show some msg after that element , some validation kind)
• Keep all you locale string here at html in <span> and <div>

JS:

• Just show/hide your respective <span> or <div> when jQuery validation fires for corresponding form inputs.

Answer 2

jQuery.i18n.properties is a lightweight jQuery plugin for providing internationalization to javascript from '.properties' files, just like in Java Resource Bundles. It loads and parses resource bundles (.properties) based on provided language and country codes. More

Suppose

label.delete.success =Successfully Deleted
label.delete.failure=Error in success

is your messages.properties properties file.

Then jQuery.i18n.prop(label.delete.success) returns Successfully Deleted from your javascript file.

Hope this helps.