表单验证失败后表单上的单选按钮无法正确呈现 - 引导

Posted 2023-03-05

【中文标题】表单验证失败后表单上的单选按钮无法正确呈现 - 引导

【英文标题】：Radio buttons on form not rendering correctly after form validation failure- bootstrap

【发布时间】：2014-04-08 05:24:28

【问题描述】：

带有 Bootstrap 3 的 Rails 4 应用

我有一个包含单选按钮输入的表单：

<strong> Radio button options on form </strong><br>
   <div class="form-group">
     &nbsp<%= f.radio_button :category, 'A' %> &nbsp <%= f.label "A", "A" %><br /> 
     &nbsp<%= f.radio_button :category, 'B' %> &nbsp <%= f.label "B", "B" %><br />  
     &nbsp<%= f.radio_button :category, 'C' %> &nbsp <%= f.label "C", "C" %><br />
   </div>

第一次加载表单时，一切看起来都是正确的：

我的问题是，如果表单由于验证错误（缺少所需的输入等，表单上的任何位置）而失败，当页面重新呈现时，单选按钮和标签将显示在两个不同的行上：

我该如何解决这个问题？

更新 为每个生成的 html 是： 原文（正确）：

    <strong> Radio button options on form </strong><br>
    <div class="form-group">
      &nbsp<input id="listing_category_1" name="listing[category]" type="radio" value="1" /> &nbsp <label for="listing_1">A</label><br /> 
      &nbsp<input id="listing_category_2" name="listing[category]" type="radio" value="2" /> &nbsp <label for="listing_2">B</label><br />  
      &nbsp<input id="listing_category_3" name="listing[category]" type="radio" value="3" /> &nbsp <label for="listing_3">C</label><br />
    </div>

对于重新渲染（不正确）：

    <strong> Radio button options on form </strong><br>
    <div class="form-group">
      &nbsp<div class="field_with_errors"><input id="listing_category_1" name="listing[category]" type="radio" value="1" /></div> &nbsp <label for="listing_1">A</label><br /> 
      &nbsp<div class="field_with_errors"><input id="listing_category_2" name="listing[category]" type="radio" value="2" /></div> &nbsp <label for="listing_2">B</label><br />  
      &nbsp<div class="field_with_errors"><input id="listing_category_3" name="listing[category]" type="radio" value="3" /></div> &nbsp <label for="listing_3">C</label><br />
    </div>

【问题讨论】：

您可以为原始页面和验证页面添加生成的 HTML 和 CSS 吗？

使用浏览器的开发工具检查，确定标记或 CSS 是否已更改。根据上面的屏幕截图，我们无法为您执行此操作。

谢谢，用 HTML 更新

【参考方案1】：

这是因为 Rails 将带有错误的字段包装到 div 中：

<div class="field_with_errors">
  <input name="foo" type="radio" value="1" />
</div>

一种解决方法是自定义此css 类，例如使div 显示属性inline 而不是block：

.field_with_errors  display: inline; 

另一个选项，修改 Rails 设置以更改显示错误时的默认行为：

config.action_view.field_error_proc = Proc.new  |html_tag, instance| "<span class='field_with_errors'>#html_tag</span>".html_safe 

【讨论】：

添加 .field_with_errors display: inline; 到 CSS 就像一个魅力。谢谢！