how to use validation in livewire?

[ramabie]

// app/validators/auth/register_validator.ts

import vine from '@vinejs/vine'

/**
 * Validates the register's creation action
 */
export const createRegistertValidator = vine.compile(
    vine.object({
        full_name: vine.string().trim().minLength(3),
        email: vine.string().trim().email().use(
            unique({ table: 'users', column: 'email' })
        ),
        password: vine.string().minLength(6).confirmed(),
    })
)

=======================================================================
// app/livewire/auth/register_index.ts

import { Component, title, layout } from 'adonisjs-livewire'
import { createRegistertValidator } from '#validators/auth/register_validator';

@title('Register Page')
@layout('components.layouts.auth')
export default class RegisterIndex extends Component {
    public full_name: string = '';
    public email: string = '';
    public password: string = '';
    public password_confirmation: string = '';

    async store()
    {
        // const data = {
        //     full_name: this.full_name,
        //     email: this.email,
        //     password: this.password,
        // }
        // const payload = await createRegistertValidator.validate(data)

        // const payload = await request.validateUsing(createRegistertValidator)
    }

    async render()
    {
        return this.view.render('livewire/auth/register-index');
    }
}

========================================================================
//resources/views/livewire/auth/register-index.edge

<div x-data class="p-10">
    <form wire:submit="store">
        <div class="grid grid-cols-12 gap-3">
            <div class="col-span-12">
                <h1 class="text-9xl font-bold">Register Form</h1>
            </div>
            <div x-id="['text-input']" class="col-span-12">
                <label :for="$id('text-input')">Full Name</label>
                <input wire:model="full_name" :id="$id('text-input')" type="text" class="border border-gray-700">
                {{--  ??????  --}}
                {{--  @error('full_name') <p class="text-red-500">{{ message }}</p> @end  --}}
            </div>
            <div x-id="['text-input']" class="col-span-12">
                <label :for="$id('text-input')">Email</label>
                <input wire:model="email" :id="$id('text-input')" type="email" class="border border-gray-700">
            </div>
            <div x-id="['text-input']" class="col-span-12">
                <label :for="$id('text-input')">Password</label>
                <input wire:model="password" :id="$id('text-input')" type="password" class="border border-gray-700">
            </div>
            <div x-id="['text-input']" class="col-span-12">
                <label :for="$id('text-input')">Confirm Password</label>
                <input wire:model="password_confirmation" :id="$id('text-input')" type="password" class="border border-gray-700">
            </div>
            <div x-id="['text-input']" class="col-span-12">
                <button type="submit" :id="$id('text-input')" class="border border-gray-700">Login</button>
            </div>
        </div>
    </form>
</div>

[KABBOUCHI]

added support for flashing session, check the example here https://github.com/KABBOUCHI/adonisjsv6-livewire-demo/compare/4a80abeee45704943865c6576ec6dcc72c3336d1..54eead26ef01ab279d8ef8e604023d9c94697690

[ramabie]

OK, thank you very much sir