ferdinandfrank / vue-forms

Set of Vue.js components to submit forms with ajax.
https://ferdinandfrank.github.io/vue-forms/
MIT License
5 stars 0 forks source link

Hi How to translate Alert Messages in Multilangual application? #3

Closed pieinn closed 6 years ago

pieinn commented 6 years ago

Thank you for useful repository.

Please advice how to translate Alert Messages, because my project is multilingual.

And how to show validation with SweetAlert or Tooltip?

This rules: 'name' => 'required|min:3|max:255', 'mobile_no' => 'phone:KZ,RU', 'message' => 'required|max:65535', 'email' => 'required|email',

2017-11-21 16 48 48
ferdinandfrank commented 6 years ago

You can show the validation errors before the form gets submitted by setting the rules property on your input components (see the Validation section for details). On these rules you can also specify a translated error message for each particular rule with the help of Laravel's translations. In the case of your name input field the component instance should be defined as followed:

<form-input name="name" label="name" :rules=[{required: true, message: '{{ trans('validation.required') }}'}, {min: 3, message: "{{ trans('validation.min', ['min' => 3]) }}"}, {max: 255, message: "{{ trans('validation.min', ['min' => 255]) }}"}]> </form-input>

By default these error messaged should be shown below the input automatically with the help of Bootstrap, but feel free to adapt all of the components to your needs and your design. The error message that is currently shown on the input is saved in a data attribute called errorMessage. So, you can adapt your input component's by watching this attribute and show an alert message (or tooltip) whenever this value changes.

For the alert messages based on validation errors from the server I was still using Laravel's old error format (That's why only the message in your image will be shown to the user). I will fix this issue within the next minutes. Sorry about that and thanks for the hint.

pieinn commented 6 years ago

Thank you! Just Works! Please advice how to clear inputs after submission?

My Controller: return redirect()->back()->withInput();

ferdinandfrank commented 6 years ago

You can simply add the prop clear with the value true to your AjaxFormComponent:

<ajax-form method="post" action="path/to/server" :clear=true>
...
</ajax-form>

When you submit an ajax request to the server via an AjaxFormComponent, the server should return a json response in order to control the further handling of the AjaxFormComponent. Example for showing a success alert message and redirect the user after the alert message was shown:

return response()->json([
    'redirect'  => route('home'),
    'alert' => [
        'title'   => 'Success',
        'message' => 'The request was successful!'
    ]
]);

You can view the full list of json params for the response here. I will make a better documentation within the next days!