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

Question

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

无线电组件

<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" />

当前的外观

我想达到的效果（忽略checkbox部分）

Answer 1

您可以 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'))
    ]) 

  !!} />

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

Custom validation on radio buttons if not selected | Tailwind

laravel

tailwind-css

laravel-livewire