如何滾動到 livewire laravel 中的第一個驗證錯誤消息

Question

我是livewire的新手。 我正在處理用戶的注冊過程。 注冊表非常大，驗證對我來說也很好。 問題是當用戶提交表單驗證時，用戶無法看到，因為提交按鈕位於底部而表單位於頂部。

當我手動滾動到頂部時，正在顯示錯誤消息。 所以當用戶提交表單時我想要的是它會自動 go 到第一條錯誤消息。 這是我的代碼：

<form wire:submit.prevent="userRegister">
<div class="row">
    <div class="col-md-3">
        <label>First Name *</label>
    </div>
    <div class="col-md-9">
        <input type="text" wire:model="register.first_name" placeholder="Enter First Name" required>
        @error('register.first_name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <label>Last Name *</label>
    </div>
    <div class="col-md-9">
        <input type="text" wire:model="register.last_name" placeholder="Enter Last Name">
        @error('register.last_name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <label>Test 1 Name *</label>
    </div>
    <div class="col-md-9">
        <input type="text" wire:model="register.test1_name" placeholder="Enter Last Name">
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <label>Test 2 Name *</label>
    </div>
    <div class="col-md-9">
        <input type="text" wire:model="register.test2_name" placeholder="Enter Last Name">
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <label>Test 3 Name *</label>
    </div>
    <div class="col-md-9">
        <input type="text" wire:model="register.test3_name" placeholder="Enter Last Name">
    </div>
</div>
<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9">
        <!--<input type="submit" value="Edit" class="edt-sb">-->
        <input wire:click="userRegister" type="submit" value="Submit" class="edt-sv">
    </div>
</div>
</form>

我的寄存器.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
class Register extends Component
{
public $register;
protected $rules = [
    'register.first_name' => 'bail|required|max:50',
    'register.last_name' => 'bail|required|max:50',
];

protected $messages = [
    'register.first_name.required' => 'Please enter first name',
];

public function userRegister(){
    $this->validate();
}

我希望當用戶提交表單時，它會立即滾動到第一條錯誤消息。 目前我的驗證工作對我來說很完美。 我需要使用高山js嗎？ 為了這。

Answer 1

Livewire 錯誤將保存在 $errors 包中，因此您可能可以為表單中的每個字段添加一個 id，並使用 alpinejs 將第一個元素與錯誤包中存在的 id 放在一起，例如：

        <div x-data="{
                'errors': {{ json_encode(array_keys($errors->getMessages())) }},
                focusField(input) {
                    fieldError = document.getElementById(input);
                    if (fieldError) {
                        fieldError.focus({preventScroll:false});
                    }
                },
            }"
             x-init="() => { $watch('errors', value => focusField(value[0])) }">
            
                    <input id="register.test3_name" type="text" wire:model="register.test3_name" placeholder="Enter Last Name">
        </div>

Answer 2

我幾乎遇到了同樣的問題，但是成功消息不是錯誤消息，對於我使用updated()的錯誤消息，它們會在用戶填寫字段時實時顯示。

我的 Class 組件：

class FormSubmissions extends Component
{
    public $city;
    public $fullname;

    protected $rules = [
        'city' => 'required',
        'fullname' => 'required',
    ];

    public $successMessage;

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

    public function submitForm()
    {
        $submission = $this->validate();



        $this->successMessage = trans('site.success');


        $this->resetForm();
    }


    public function resetForm()
    {
        $this->city = '';
        $this->fullname = '';
    }

}

我的刀片模板：

<div id="formSection" class="form-wrapper">
    @if ($successMessage)
        <div  class="alert alert-success alert-dismissible fade show" role="alert">
            {{ $successMessage }}
            <button  wire:click="$set('successMessage', null)" type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <script>
            var elmnt = document.getElementById("formSection");
            elmnt.scrollIntoView();
        </script>
    @endif
    <form wire:submit.prevent="submitForm" action="/" method="POST">
    ...

</div>

因此，添加成功消息的小腳本允許我滾動回表單 Section #formSection的頂部。

Answer 3

如果您使用<x-jet-input-error/>組件來顯示錯誤，您只需修改resources/views/vendor/jetstream/components/input-error.blade.php （確保您已發布 livewire 視圖）文件到下面的代碼：

@props(['for'])

<span x-data="{hasError: '{{$errors->get($for)[0] ?? ''}}' }"
     x-init="()=> { $watch('hasError', (value)=> {
            let errorDiv = document.getElementsByClassName('invalid-feedback')[0];
            if(errorDiv){
                errorDiv.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'nearest'});
            }
    })}">
    @error($for)
        <span {{ $attributes->merge(['class' => 'invalid-feedback d-block']) }} role="alert" style="font-size: inherit">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</span>

解釋：我們使用 alpine 來觀察“$for”字段的驗證消息的變化。 一旦它發生變化（驗證消息顯示或消失），它就會查找錯誤塊並滾動到它