Formtastic:嵌套字段集产生不可用/无效的标记

发布于 2024-12-11 22:41:30 字数 4613 浏览 0 评论 0原文

我试图通过将相关属性放入 form.inputs 块将它们分组到“Doublefield”中:

<%= semantic_form_for MyModel.new do |f| %>
    <%= f.inputs 'Advanced' do %>
        <%= f.input :name %>
        <%= f.inputs 'Min/Max', class: 'doublefield' do %>
          <%= f.input :min %>
          <%= f.input :max %>
        <% end %>
        <%= f.inputs 'Zip/Place', class: 'doublefield' do %>
          <%= f.input :zip %>
          <%= f.input :place %>
        <% end %>
    <% end %> 
<% end %>

但是,这会产生这样的标记(省略了不相关的标记):

<form accept-charset="UTF-8" action="my_model" class="formtastic" id="new_my_model" method="post" novalidate="novalidate">  
    <fieldset class="inputs">
        <ol>
                <li class="string input optional stringish" id="my_model_name_input">
                    ...
                </li>
                <li class="input">
                    <fieldset class="doublefield">
                        ...
                    </fieldset>
                </li>
                <fieldset class="doublefield">
                    ...
                </fieldset>
        </ol>
    </fieldset>
</form>

只有字段集中的第一个嵌套字段集被 < 包围code>

  • 标记,其他标记仅呈现为
    ,这会导致无效标记 (
    不允许作为
      的直接子代)。这不仅丑陋,而且还使得将样式应用到表单变得困难。
  • 在我的研究中,我偶然发现了一些关于这个问题的评论,其中指出这可能是 formattastic 本身的问题,但到目前为止我还没有找到解决方法或建议。

    有什么想法吗?

    版本信息:

    • rails (3.2.0.beta bd4bd3f)
    • formtastic (2.0.0.rc4 7d3bb2f)
    • ruby​​ 1.9.2p290 (2011-07-09 修订版 32553) [x86_64-linux]

    完整标记:

    <form accept-charset="UTF-8" action="my_model" class="formtastic" id="new_my_model" method="post" novalidate="novalidate">
    <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓">
        <input name="authenticity_token" type="hidden" value="zPm0lLyT6MM4M+LI1b7c9d7NqGQM2PiT+kHsjUnfTWM="></div>
        <fieldset class="inputs">
            <legend><span>Advanced</span></legend>
                <ol>
                    <li class="string input optional stringish" id="my_model_name_input">
                        <label class=" label" for="my_model_name">Name</label>
                        <input id="my_model_name" maxlength="255" name="my_model[name]" type="text">
                </li>
                    <li class="input">
                        <fieldset class="doublefield">
                            <legend><span>Min/Max</span></legend>
                        <ol>
                            <li class="number input optional stringish" id="my_model_min_input">
                                <label class=" label" for="my_model_roosts_min">Min</label>
                                <input id="my_model_min" maxlength="4" name="my_model[min]" step="any" type="number">
                            </li>
                            <li class="number input optional stringish" id="my_model_max_input">
                                <label class=" label" for="my_model_max">Max</label>
                                <input id="my_model_roosts_max" maxlength="4" name="my_model[max]" step="any" type="number">
                            </li>
                        </ol>
                    </fieldset>
                </li>
                    <fieldset class="doublefield">
                        <legend><span>Zip/Place</span></legend>
                        <ol>
                        <li class="string input optional stringish" id="my_model_zip_input">
                            <label class=" label" for="my_model_zip">Zip</label>
                            <input id="my_model_zip" maxlength="255" name="my_model[zip]" type="text">
                        </li>
                        <li class="string input optional stringish" id="my_model_place_input">
                            <label class=" label" for="my_model_place">Place</label>
                            <input id="my_model_place" maxlength="255" name="my_model[place]" type="text">
                        </li>
                    </ol>
                </fieldset>
            </ol>
        </fieldset>
    </div>
    

    I'm trying to group related attributes into a "Doublefield" by putting them into a form.inputs block:

    <%= semantic_form_for MyModel.new do |f| %>
        <%= f.inputs 'Advanced' do %>
            <%= f.input :name %>
            <%= f.inputs 'Min/Max', class: 'doublefield' do %>
              <%= f.input :min %>
              <%= f.input :max %>
            <% end %>
            <%= f.inputs 'Zip/Place', class: 'doublefield' do %>
              <%= f.input :zip %>
              <%= f.input :place %>
            <% end %>
        <% end %> 
    <% end %>
    

    However, this produces a markup like that (omitted irrelevant markup):

    <form accept-charset="UTF-8" action="my_model" class="formtastic" id="new_my_model" method="post" novalidate="novalidate">  
        <fieldset class="inputs">
            <ol>
                    <li class="string input optional stringish" id="my_model_name_input">
                        ...
                    </li>
                    <li class="input">
                        <fieldset class="doublefield">
                            ...
                        </fieldset>
                    </li>
                    <fieldset class="doublefield">
                        ...
                    </fieldset>
            </ol>
        </fieldset>
    </form>
    

    Only the first nested fieldset in the fieldset gets surrounded by the <li> tag, the others are just rendered as <fieldset> which leads to invalid markup (<fieldset> as direct child of <ol> is not allowed). This isn't just ugly but also makes it hard to apply styles to the form.

    In my research I've stumbled upon some comments about this issue where it stated that this could have been an issue with formtastic itself, but I haven't found a workaround or suggestion up until now.

    Any ideas?

    Version Information:

    • rails (3.2.0.beta bd4bd3f)
    • formtastic (2.0.0.rc4 7d3bb2f)
    • ruby 1.9.2p290 (2011-07-09 revision 32553) [x86_64-linux]

    Full markup:

    <form accept-charset="UTF-8" action="my_model" class="formtastic" id="new_my_model" method="post" novalidate="novalidate">
    <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓">
        <input name="authenticity_token" type="hidden" value="zPm0lLyT6MM4M+LI1b7c9d7NqGQM2PiT+kHsjUnfTWM="></div>
        <fieldset class="inputs">
            <legend><span>Advanced</span></legend>
                <ol>
                    <li class="string input optional stringish" id="my_model_name_input">
                        <label class=" label" for="my_model_name">Name</label>
                        <input id="my_model_name" maxlength="255" name="my_model[name]" type="text">
                </li>
                    <li class="input">
                        <fieldset class="doublefield">
                            <legend><span>Min/Max</span></legend>
                        <ol>
                            <li class="number input optional stringish" id="my_model_min_input">
                                <label class=" label" for="my_model_roosts_min">Min</label>
                                <input id="my_model_min" maxlength="4" name="my_model[min]" step="any" type="number">
                            </li>
                            <li class="number input optional stringish" id="my_model_max_input">
                                <label class=" label" for="my_model_max">Max</label>
                                <input id="my_model_roosts_max" maxlength="4" name="my_model[max]" step="any" type="number">
                            </li>
                        </ol>
                    </fieldset>
                </li>
                    <fieldset class="doublefield">
                        <legend><span>Zip/Place</span></legend>
                        <ol>
                        <li class="string input optional stringish" id="my_model_zip_input">
                            <label class=" label" for="my_model_zip">Zip</label>
                            <input id="my_model_zip" maxlength="255" name="my_model[zip]" type="text">
                        </li>
                        <li class="string input optional stringish" id="my_model_place_input">
                            <label class=" label" for="my_model_place">Place</label>
                            <input id="my_model_place" maxlength="255" name="my_model[place]" type="text">
                        </li>
                    </ol>
                </fieldset>
            </ol>
        </fieldset>
    </div>
    

    如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

    扫码二维码加入Web技术交流群

    发布评论

    需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

    评论(1

    没︽人懂的悲伤 2024-12-18 22:41:30

    [编辑] 做出了与 Formtastic 2 相关的答案

    这是 formtastic 中的一个错误,已于 3 天前修复:https://github.com/justinfrench/formtastic/commit/4c5bf686b7fc5bbbc2e03c61cace101e713a51e0

    如果您不想等待发布(而且您可能不想),请使用 git 中的版本:

    gem 'formtastic', :git => 'git://github.com/justinfrench/formtastic.git'
    

    [EDIT] made the answer relevant to Formtastic 2

    This was a bug in formtastic, which has been fixed 3 days ago: https://github.com/justinfrench/formtastic/commit/4c5bf686b7fc5bbbc2e03c61cace101e713a51e0

    If you don't want to wait for the release (and you likely don't), use the version from git:

    gem 'formtastic', :git => 'git://github.com/justinfrench/formtastic.git'
    
    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文