![](/img/trans.png)
[英]How in laravel-livewire set flash message with validation erros
[英]how to scroll to first validation error message in livewire laravel
我是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吗? 为了这。
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>
我几乎遇到了同样的问题,但是成功消息不是错误消息,对于我使用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">×</span>
</button>
</div>
<script>
var elmnt = document.getElementById("formSection");
elmnt.scrollIntoView();
</script>
@endif
<form wire:submit.prevent="submitForm" action="/" method="POST">
...
</div>
因此,添加成功消息的小脚本允许我滚动回表单 Section #formSection
的顶部。
如果您使用<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”字段的验证消息的变化。 一旦它发生变化(验证消息显示或消失),它就会查找错误块并滚动到它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.