动态创建“ul”和“li”并配置“单选按钮”的错误消息

Posted 2023-02-23

【中文标题】动态创建“ul”和“li”并配置“单选按钮”的错误消息

【英文标题】：Error message dynamically creating "ul" and "li" and dispositioning the "radio button"

【发布时间】：2018-10-30 16:41:30

【问题描述】：

我在检查时得到了以下代码。我看到ul 和li 是在验证时动态创建的，这是预期的。

但是，错误消息会将组中的下一个单选按钮放置到下一行，并将消息放在第一个单选按钮之后的第一行。任何将消息强制到下一行或可能在第二个单选按钮之后而不配置按钮的想法。

我使用 data-parsley-required="required"。我打算在标签后放置一个 div，但不知道如何在其中定位错误消息，因为我在标签中使用的唯一东西是 data-parsley-required="required" 删除它不会显示错误。

<div class="col-pa" data-toggle="buttons">
    <label class="button err" aria-describedby="parsley-id-multiple-Units">
        <input data-parsley-required="required" id="Gender" name="Units" type="radio" value="Fixed" data-parsley-multiple="Units" data-parsley-id="12"> 
        Fixed
    </label><ul class="validation-errors filled" id="parsley-id-multiple-Units"><li class="parsley-required">This is mandatory</li></ul>
    <label class="button">
        <input data-parsley-required="required" id="Units" name="Units" type="radio" value="Variable" data-parsley-multiple="Units"> 
        Variable
    </label>
</div>

我的 cshtml 代码

<div class="buttons" role="group" data-toggle="buttons">
                <label class="@fixedClass">
                    @html.RadioButtonFor(m => m.Units, "Fixed", new  data_parsley_required = "required" ) 
                    @Translator.GetTextOrDefault("CMS.Value.Units", "Fixed")
                </label>
                <label class="@variableClass">
                    @Html.RadioButtonFor(m => m.Units, "Variable", new  data_parsley_required = "required" ) 
                    @Translator.GetTextOrDefault("CMS.Value.Units", "Variable")
                </label>
            </div>

【参考方案1】：

根据parsley.js doc，您可以在首次启动.parsley(options)时配置选项。在这种情况下，您要查找的选项是 errorsWrapper。

以下是如何定位错误消息容器的示例。

$(() => 
  var instance = $("#myform").parsley(
    errorsWrapper: ".errorsWrapper"
  );
);

.errorsWrapper 
  display: none;
  padding: 4px;


.errorsWrapper.filled 
  display: block;
  border: 1px solid red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.js"></script>

<form id="myform">
    <label class="button err" aria-describedby="parsley-id-multiple-Units">
        <input name="Units" type="radio" value="Fixed" data-parsley-multiple="Units" data-parsley-required="required" /> 
        Fixed
    </label>
    <label class="button">
        <input name="Units" type="radio" value="Variable" data-parsley-multiple="Units" data-parsley-required="required" /> 
        Variable
    </label>

    <ul class="errorsWrapper">
    </ul>
    
    <br />
    <input type="submit" class="btn btn-default validate" />
</form>

他们还有一些有用的demos，对于了解插件的工作原理非常有用。

【讨论】：

谢谢，我的代码没有 UL 和 LI。它是动态创建的。我用cshtml中的我的代码更新了我的问题。请帮助如何申请

在类似方法的帮助下，我终于设法显示错误消息，但现在两次错误消息显示。你能帮忙吗？我使用带有 ID 的 div 并将错误消息定位到该 ID，例如 data_parsley_errors_container = "#errorContainer"

@Learner Parsley 可能认识到多个不同的字段无效。如果要链接元素验证，例如具有不同名称的复选框，则需要指定 data-parsley-multiple。此外，还有另一个属性可能支持这一点，即data-parsley-group。在您更新的问题中，您的 cshtml 未能在您的输入字段中指定 data-parsley-multiple。

不，这对我没有帮助。我设法将 data-parsley-errors-container 放在上层 div 中，所以现在它在正确的位置显示错误消息。但它也会在右侧显示错误消息。两次

正如你所建议的，当我放置多个时，所有其他控件都会搞砸