时间戳

首页 > 解决方案 > 如果未选中，则对单选按钮进行自定义验证 | 顺风

laravel - 如果未选中，则对单选按钮进行自定义验证 | 顺风

问题描述

如何通过在单选按钮周围显示一个红色环并使文本变为红色来进行验证。目前我只是显示一个验证弹出消息。查看图片以获得更好的想法。

无线电组件

<input type="radio" {!! $attributes->class(['border-gray-300 text-gray-600 shadow-sm focus:border-gray-300 focus:ring focus:ring-gray-200 focus:ring-opacity-50', 'border-red-500 text-red-500' => $errors->has($attributes->get('name'))]) !!} />

Livewire 视图片段

  <div class="space-y-5">
  @foreach ($ticket_types as $ticket_type)
  <div>
    <div class="relative flex items-start">
      <div class="absolute flex items-center h-5">
        <x-radio-button wire:model="ticket_type" @click="isQuestion = false" id="{{ $ticket_type->id }}" aria-describedby="{{ $ticket_type->id }}_description" value="{{ $ticket_type->id }}" class="h-4 w-4 transition duration-150 ease-in-out" />
      </div>
      <div class="pl-7 text-sm leading-5">
        <x-jet-label for="{{ $ticket_type->id }}_title">
          {{ $ticket_type->title }}
        </x-jet-label>
        <p id="{{ $ticket_type->id }}_description" class="text-gray-500">
          {{ $ticket_type->description }}
        </p>
      </div>
    </div>
  </div>
  @endforeach
</div>
<x-input-error for="ticket_type" />

当前的外观和感觉

在此处输入图像描述

我想要实现的（忽略复选框部分）

在此处输入图像描述

标签： laraveltailwind-csslaravel-livewire

解决方案

你可以conditionally include classes在组件上。因此，您可以执行以下操作：

<input type="radio" 
  {!! $attributes->class([

    // these styles are applied by default
    'border-gray-300 text-gray-600 shadow-sm focus:border-gray-300 focus:ring focus:ring-gray-200 focus:ring-opacity-50',

    // these are applied if the name of the component is found in the error bag
    // meaning there was an error
    'border-red-500 text-red-500' => $errors->has($attributes->get('name'))
    ]) 

  !!} />

推荐阅读