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

Posted 2023-03-07

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

【英文标题】：Custom validation on radio buttons if not selected | Tailwind

【发布时间】：2021-05-23 21:24:01

【问题描述】：

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

无线电组件

<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 视图 sn-p

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

当前的外观和感觉

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

【参考方案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'))
    ]) 

  !! />

【讨论】：

感谢 Unflux，但我收到以下错误 BadMethodCallException Method Illuminate\View\ComponentAttributeBag::class does not exist. (View: /Users/nicotravassos/code/template/resources/views/components/radio-button.blade.php) 我假设是因为我缺少 RadioButton.php 文件对不起，我对 laravel 很陌生，也许该文件必须包含什么并将其包含在上面的答案中？上面的逻辑也会使文本也变成红色吗？

Laravel 8 Jetstream livewire 堆栈

@NicoTravassos 你能用你的单选按钮组件的当前代码更新你的问题吗？

我已经用我当前的单选按钮更新了我的代码，如果它还不够我可以添加邀请您到 github 项目以便快速查看？

在你的 sn-p 抛出错误后我恢复了我将使用你之前提供的代码更新