我检查时得到了以下代码。我看到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>
$(() => {
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,对于理解插件的工作原理非常有用。