Parsley校验动态生成ul/li致单选按钮排版异常的解决咨询

针对你遇到的Parsley校验错误消息打乱单选按钮排版的问题，我们可以通过指定错误消息容器的方式精准控制提示位置，同时保持按钮组的布局整齐。

核心思路 #

Parsley默认会把错误消息插入到触发校验的元素（这里是第一个单选按钮的<label>）之后，直接挤到第二个按钮前面打乱布局。我们可以用data-parsley-errors-container属性，强制让错误消息显示到预先定义的容器中，彻底摆脱默认位置的限制。

具体实现步骤 #

1. 添加错误消息容器：在两个单选按钮的<label>之后，新增一个空<div>作为错误消息的专属载体。
2. 配置Parsley属性：给每个单选按钮添加data-parsley-errors-container属性指向这个容器；同时确保所有单选按钮共享同一个data-parsley-multiple值（和name属性一致），让Parsley把它们当作一个组来校验。

修改后的CSHTML代码 #

<div class="buttons" role="group" data-toggle="buttons">
    <label class="@fixedClass">
        @Html.RadioButtonFor(m => m.Units, "Fixed", new { 
            data_parsley_required = "required",
            data_parsley_multiple = "Units",
            data_parsley_errors_container = "#units-error-container"
        })
        @Translator.GetTextOrDefault("CMS.Value.Units", "Fixed")
    </label>
    <label class="@variableClass">
        @Html.RadioButtonFor(m => m.Units, "Variable", new { 
            data_parsley_multiple = "Units",
            data_parsley_errors_container = "#units-error-container"
        })
        @Translator.GetTextOrDefault("CMS.Value.Units", "Variable")
    </label>
    <!-- 错误消息专属容器 -->
    <div id="units-error-container" class="validation-errors"></div>
</div>

关键细节说明 #

• data-parsley-multiple：这个属性告诉Parsley把所有同名（name="Units"）的单选按钮视为一个校验组，只需要校验至少有一个被选中，所以只需要在第一个按钮上设置required即可，不用重复添加。
• data-parsley-errors-container：指定错误消息插入到#units-error-container中，这样消息会显示在整个按钮组的下方，完全不会干扰两个按钮的横向排版。
• 可选样式优化：如果想让错误消息更美观，可以给容器加一点CSS：

#units-error-container {
    clear: both;
    color: #dc3545;
    margin-top: 6px;
    font-size: 0.875em;
}

这样修改后，当用户未选择任何单选按钮时，错误消息会乖乖显示在按钮组下方，彻底解决排版混乱的问题。

内容的提问来源于stack exchange，提问作者Jasmine