javascript - 动态创建“ul”和“li”并配置“单选按钮”的错误消息
问题描述
我检查时得到了以下代码。我看到ul
andli
是在验证时动态创建的,这是预期的。
但是,错误消息会将组中的下一个单选按钮放置到下一行,并将消息放在第一个单选按钮之后的第一行。任何将消息强制到下一行或可能在第二个单选按钮之后而不配置按钮的想法。
我使用 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>
解决方案
根据parsley.js 文档,您可以在首次启动时配置选项.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>
他们还有一些有用的演示,对于了解插件的工作原理非常有用。
推荐阅读
- python - 带输出的 sqlalchemy 存储过程
- java - 仅当缓存值不早于当前值时如何更新项目
- python - Python:使用 API 从 JSON 中提取数据,发送到 Excel。获取类型错误:NoneType 对象不可下标
- c# - C# WebRequest 删除 GET 请求的授权标头
- excel - 复制范围并将粘贴转置到包含单元格的行中
- javascript - 如何将角度组件方法绑定到第三方 javascript 方法回调?
- windows - Qt - QFileSystemModel 不支持网络路径和外部驱动器?
- css - 在这种折叠或展开 CSS 过渡期间导致跳跃的原因是什么?
- sql - 查找计算电子商务数据集一阶和二阶之间时间的查询
- google-apps-script - 事件重复次数作为事件描述中的变量 Google App Script Calendar