Laravel Livewire 实时验证类之间的切换答案

【问题标题】：Laravel Livewire Real Time Validation switching between classesLaravel Livewire 实时验证类之间的切换
【发布时间】：2021-05-12 23:39:36
【问题描述】：

我想知道如何在 Livewire 实时表单验证中的类之间切换？ 假设我在输入类中有一个带有一些输入字段的表单，例如 (email) 我有一个 laravel 指令 @error('email') is-invalid @enderror 这将重复 "is -invalid" 类当表单域为空时。我想要实现的是在“is-invalid”和“is-valid”类之间切换，如果表单字段为空，则第一个，如果表单字段已填充，则第二个。

这是我的代码：

class ContactForm extends Component
{
    public $name;
    public $email;

    protected $rules = [
        'name' => 'required|min:6',
        'email' => 'required|email',
    ];

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

    public function saveContact()
    {
        $validatedData = $this->validate();

        Contact::create($validatedData);
    }
}

<form wire:submit.prevent="saveContact">
    <input type="text" wire:model="name" class="@error('name') is-invalid @enderror">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="email" class="@error('email') is-invalid @enderror">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Contact</button>
</form>

【问题讨论】：

标签： laravel-8 laravel-livewire bootstrap-5

【解决方案1】：

我们可以使用错误包$errors并检查它是否与现有的@error刀片指令有错误以显示错误消息。


<form wire:submit.prevent="saveContact">
    <input type="text" wire:model="name" class="@if($errors->has('name')) is-invalid @else is-valid @endif">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="email" class="@if($errors->has('email')) is-invalid @else is-valid @endif">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Contact</button>
</form>

我使用了错误包中的has 函数和通常的@if 刀片指令来实现这一点。

现在如果没有错误并且输入有效，is-valid 类将被添加。同样，如果验证失败，将添加is-invalid 类。

【讨论】：

更简单：@error('name') is-invalid @else is-valid @enderror

【解决方案2】：

约翰内斯，

您需要使用 javascript 来解决它。请参阅下面的答案。

class ContactForm extends Component
{
    public $name;
    public $email;

    protected $rules = [
        'name' => 'required|min:6',
        'email' => 'required|email',
    ];

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

    public function saveContact()
    {
        $validatedData = $this->validate();

        Contact::create($validatedData);
    }
}

<form wire:submit.prevent="saveContact">
    <input type="text" wire:model="name" class="@error('name') is-invalid @else is-valid @enderror" id="name-input">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="email" class="@error('email') is-invalid @else is-valid @enderror" id="email-input">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Contact</button>
</form>


<!-- javascript here: i use jquery syntaxe here -->
<script>
    $(document).ready(function() {
        $('#name-input').change(function(){
            $(this).removeClass('is-invalid')
        });

        $('#email-input').change(function(){
            $(this).removeClass('is-invalid')
        });
    })
</script>

解释?

我将 HTML 修改如下：

<input type="text" wire:model="name" class="@error('name') is-invalid @else is-valid @enderror" id="name-input">
    @error('name') <span class="error">{{ $message }}</span> @enderror

<input type="text" wire:model="email" class="@error('email') is-invalid @else is-valid @enderror" id="email-input">

我为每个输入添加一个 id，以便稍后在脚本中调用它们。如果服务器没有返回错误消息，我也会添加“is-valid”类。

希望此解决方案对您有所帮助。告诉我

【讨论】：