by Devin Yang
(This article was automatically translated.)

Published - 2 years ago ( Updated - 2 years ago )

This article uses a simple Laravel livewire example,
Look at how the livewire component verifies user input errors and displays Chinese error messages.  

Functional test, the activity name is not filled, and the URL is messed up, and the form is sent.  
In the picture below, the "red" characters we can see are very friendly Chinese error messages.  

 

1. First set config/app.php, add environment variables, and default Chinese.  
In this way, the Chinese language file can be used without adjusting the default in .env.

 /*
    |------------------------------------------------- -------------------------
    | Application Locale Configuration
    |------------------------------------------------- -------------------------
    |
    | The application locale determines the default locale that will be used
    | by the translation service provider. You are free to set this value
    | to any of the locales which will be supported by the application.
    |
    */
    'locale' => env("APP_LOCALE","zh_TW"),

Second, lang/zh_TW/validation of put into Chinese language file. php, it should be found on Google on the Internet.  
If you can’t find it on Google, just use the lang/en/validation.php in your Laravel project directory. 😱 

3. It’s too simple, just look at me of the component,

$rules directly set the rules and $validationAttributes set the Chinese name of the input field.

class RedirectUrlsForm extends Component
{
    use Common;
    public $listeners = ['setOaName'];
    public $redirect_url_id;
    public $action_name;
    public $action_key;
    public $target_url;
    public $tags;
    public $errors = [];
    protected $rules = [
        'action_name' => 'required',
        'target_url' => 'required|url',
        'oa_id' => 'required'
    ];
    protected $validationAttributes = [
        'action_name' => 'Activity name',
        'target_url' => 'Direction URL'
    ];
    public function store(){
        $validatedData=$this->validate();
        RedirectUrl::create($validatedData);
    }
    public function render()
    {
        return view('livewire. redirect-urls-form');
    }
}

Check the rules in the above equation code, if it meets the rules, it will be released, and the form data will be directly stored in the Model.
Theoretically, all fields should be defined in $rules, and nullable will be set if they are not filled.
If you want to perform special processing on the field data, update it separately, which is convenient under normal circumstances.

$validatedData=$this->validate();


Fourth, this is Laravel livewire View part of the content,

When you can see the form submit, it will call store().

{{-- RedirectUrlsForm --}}
<div class="row root">
    <label class="d-none rootlabel">{{ $this->getName() }}</label>
    <div class="col-12 col-sm-6 col-lg-6">
        <div class="card" id="sample-login">
            <form wire:submit.prevent="store">
                <div class="card-body pb-0">
                    <p class="text-muted">Please fill in the name of the event and the URL of the event</p>
                    <div class="form-group">
                        <label>Activity Name @error("action_name")<span class="text-danger">{{$message}}!@enderror</span></label>
                        <div class="input-group mb-3">
                            <span class="input-group-text"><i class="fa-solid fa-flag-pennant"></i></span>
                            <input type="text" wire:model="action_name" class="form-control" placeholder="recognizable name" aria-label="activity name" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Director URL @error("target_url")<span class="text-danger">{{$message}}!</span>@enderror</label>
                        <div class="input-group">
                            <span class="input-group-text" id="basic-addon2"><i class="fa-sharp fa-solid fa-link-horizontal"></i></span> ;
                            <input type="text" wire:model="target_url" class="form-control" placeholder="redirected event URL" aria-label="directed URL" aria-describedby="basic-addon2">
                        </div>
                    </div>


5. Validation function, form random typing,

It can be directly displayed as in the screenshot above The correct Chinese error message is displayed.  
In the View part, the error message can display Chinese characters
"The format of the guide URL is wrong" and "Please fill in the activity name".  

For detailed usage, you can also check the official website of Laravel Livewire by yourself, it is very clear.

@error("action_name")<span class="text-danger">{{$message}}!@endererror< /pre>


This example uses the Laravel framework 9.31.0

artisan -V
Laravel Framework 9.31.0

Tags: laravel example laravel teaching livewire example laravel

Devin Yang

Feel free to ask me, if you don't get it.:)

No Comment

Post your comment

Login is required to leave comments

Similar Stories


d-laravel, docker, docker-compose, laravel

D-Laravel released v0.9.1 version

In order to keep D-Laravel in an operational version and a stable version. Start tagging this version Pass those tests.. This version has passed the ubuntu real and macos real machine tests, and the Container can be successfully established and executed..

docker, tinkerwell, tinker, laravel

Application of Tinkerwell and docker environment

In fact, I don't use Tinkerwell recently because it keeps costing me money to update. If you want to test the direct ssh host, it’s done, isn’t it?

d-laravel, docker, laravel, docker-compose

D-Laravel v1.0.0 release change description

In order to allow the container to be used more flexibly, D-Laravel has released version v1.0.0, which is not backward compatible. https://github.com/DevinY/dlaravel/releases/tag/v1.0.0 If you are using before v1.0.0, you need to modify the .env file of the Laravel project, change DB_HOST=127.0.0.1 to DB_HOST=db If you have a custom docker-compose-custom.yml file....more