Rails 7客户端表单复选框验证：需至少选择一个选项

要实现复选框组的客户端原生验证（无需JavaScript），需要解决两个核心问题：Rails默认禁用HTML5原生验证，以及复选框组的「至少选一个」验证逻辑。

步骤1：开启HTML5原生验证 #

Rails的form_with默认会添加novalidate="novalidate"属性，禁用浏览器原生验证。需要在表单中显式关闭这个设置：

= form_with model: @form, url: generate_matches_tournament_path(@tournament), method: :post, local: true, novalidate: false do |f|

步骤2：用<fieldset>实现「至少选一个」验证 #

HTML5的<fieldset>元素支持required属性，当设置该属性时，浏览器会强制用户在组内至少选择一个选项。将复选框组包裹在<fieldset>中，并添加required属性：

.field.justify-center.mb-4.mt-3.w-full.form-group
  = f.label :available_weekdays, 'Available Weekdays', class: "block text-sm font-bold mb-2"
  fieldset.required.rounded-xl.p-4
    # 屏幕阅读器友好的legend，也可直接复用label文本
    legend.sr-only = 'Available Weekdays'
    .checkbox_container
      - weekdays = [['Monday', 'Mon'], ['Tuesday', 'Tue'], ['Wednesday', 'Wed'], ['Thursday', 'Thu'], ['Friday', 'Fri'], ['Saturday', 'Sat'], ['Sunday', 'Sun']]
      = f.collection_check_boxes :available_weekdays, weekdays, :second, :first do |b|
        .checkbox_item
          = b.check_box(class: 'checkbox')
          = b.label(class: 'ml-2') { b.text }

  - if @form.errors[:available_weekdays].any?
    .text-red-500.text-xs.mt-1
      = @form.errors[:available_weekdays].first

关键说明 #

• 直接给collection_check_boxes加required: true会让每个复选框都被标记为必填，不符合需求，因此用<fieldset>的required属性实现组级验证。
• 保留你已有的服务端模型验证（如validates :available_weekdays, presence: true），确保前后端验证逻辑一致。
• 现代浏览器（Chrome、Firefox、Edge、Safari 15.4+）均支持<fieldset>的required属性，会自动弹出原生验证提示框。

内容的提问来源于stack exchange，提问作者Nguyễn Vũ Trịnh Lê