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.
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 !
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.
Thanks
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
And the JS:
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
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 
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
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
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
