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
