CODEWITHSUNDEEP
jsonnode.jsinternationalizationejsi18next
poortechworker
poortechworker

Reputation: 669

Placeholder i18next translation not working

I have created a registration form. I am using i18next server side.

This is my server-side configuration:

var i18n = require('i18next');
i18n.init({
saveMissing: true,
debug: true
});

app.use(i18n.handle);

The following is my locale json"

{
"app": {
  "lblalreadyhaveanaccount": "¿Ya tienes una cuenta?",
  "lblsignin": "Ingresar",
  "lblhelp": "Ayuda",
  "lblletscreateyouraccount": "Vamos a crear su cuenta",
  "lblname": "Nombre",
  "phfirstname": "Nombre de pila",
  ....
 }

I am using ejs as my template engine. This the following code:

...
<form ng-submit="validateForm()">
                <div class="form-group">
                    <!-- Name -->
                    <label><%= t('app.lblname') %></label>

                    <div class="row">
                        <div class="col-md-6">
                            <input id="fname" type="text" class="form-control"
                                   placeholder=<%= t('app.phfirstname') %>>
                        </div>
                        <div class="col-md-6">
                            <input id="lname" type="text" class="form-control"
                                   placeholder=<%= t('app.phlastname') %>>
                        </div>
                    </div>
  ....

My Question is that the label having multiword string are rendered properly, however the placeholder shows only the first word from the string in locale json.

Here is what inspect element shows:

<input id="fname" type="text" class="form-control" placeholder="Nombre" de="" pila="">

I am unable to find a solution to this problem. Kindly help me out. Thank you in advance.

Upvotes: 0

Views: 2753

Answers (1)

Cameron
Cameron

Reputation: 1524

It looks like the browser is trying to make sense of the words in the input tags. To help it along, try adding double quotes around your placeholder text, like so:

<div class="row">
    <div class="col-md-6">
        <input id="fname" type="text" class="form-control"
               placeholder="<%= t('app.phfirstname') %>"
    </div>
    <div class="col-md-6">
        <input id="lname" type="text" class="form-control"
               placeholder="<%= t('app.phlastname') %>"
    </div>
</div>

Upvotes: 1

Related Questions