Laravel sign-in error messages translation

Hello KeenThemes,

I'm attempting to integrate demo16 in a laravel project.

The project uses translations in different languages and I'm trying to figure out how to translate error sign-up error/configuration messages.

While other template items uses __('whatever') to use translated items, it seems for example the sign-in error messages are "hardcoded" in .js files:

For example in general.js in js/custom/authentication/sign-in :

fields: {
email: {
validators: {
notEmpty: {message: "Email address is required"},
emailAddress: {message: "The value is not a valid email address"}
}
},

Any hint how to be able to translate them like other elements would be appreciated.

Thanks and kind regards.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

Hello again,

I think I might have found what could help me in that process:
https://github.com/kirschbaum-development/laravel-translations-loader

Let's try it !

Hi,

You can define the translation function in the HTML, then pass it into JS file. Please check the example below.

<button type="submit" class="btn btn-lg btn-primary w-100 mb-5" data-message-email-empty="{{ __('Email address is required') }}">
@include('partials.general._button-indicator', ['label' => __('Continue')])
</button>

var messageEmailEmpty = submitButton.getAttribute('data-message-email-empty');

notEmpty: {
message: messageEmailEmpty
}

Thanks

Hey Faizal,

Thank you for your comment. Indeed, that's even better than messing with JS translations libs!

The only thing is that I also need to translate the "live" form validators (before the submit button is clicked.)

Still your example put me on the right direction I think.

I've did something like this:

Html

<!--begin::Signin Form-->
<form method="POST" action="{{ route('login') }}" class="form w-100" novalidate="novalidate"
data-message-email-empty="{{ __('validation.required', ['attribute' => 'e-mail']) }}"
data-message-email-inval
data-message-password-empty="{{ __('validation.required', ['attribute' => 'password']) }}"
data-message-password-inval
>

And the JS:

'email': {
validators: {
notEmpty: {
message: form.getAttribute('data-message-email-empty'),
},
emailAddress: {
message: form.getAttribute('data-message-email-invalid'),
}
}
},

It seems to work like a charm. Do you see any possible issue with this way of doing it ?

Again thanks a lot for your amazing support.

EDIT: sorry for the code formatting. It's seems I'm losing code indent when copy/pasting here

I've did a slightly different approach to avoid editing the original form definition and moved the attributes to a javascript block of code.

@section('scripts')
<script type="application/javascript">
with (document.querySelector('#kt_sign_in_form')) {
setAttribute('data-message-email-empty', "{{ __('validation.required', ['attribute' => 'e-mail']) }}");
setAttribute('data-message-email-invalid', "{{ __('validation.email', ['attribute' => 'e-mail']) }}");
setAttribute('data-message-password-empty', "{{ __('validation.required', ['attribute' => 'password']) }}");
setAttribute('data-message-password-invalid', "{{ __('validation.password') }}");
}
</script>
<script src="{{ asset('/js/custom/authentication/sign-in/general.js') }}" type="application/javascript"></script>
@endsection

Hi Sébastien Riccio happy

Great solution. With this, you can isolate or make fewer changes from the original JS or HTML files. As far as I know, I did not see this will have any future issues.

Thanks

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(