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.
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>
@endsectionHi Sébastien Riccio 
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
