我使用.NET Framework 4.7和ASP.NET MVC来生成表单,并使用jQuery Validate进行验证,它适用于经典的输入字段,但对于@Html.CheckBoxFor
,它生成了两个同名的输入,第一个是标准输入,第二个是隐藏的,它是.NET的默认值,但jQuery validate不适用于此。
对我来说,唯一有效的方法是为特定元素添加验证规则,但这种方法不委托消息,只应用CSS类样式为无效输入添加红色背景
- 什么工作,但不是理想的解决方案 *
$("input[name='Do[0].IsSelected']:not(:hidden)").rules("add", {
required: true,
messages: { required: "field is required." },
});
字符串
什么不适用于jQuery验证:
C#代码:
<div class="col-lg-7 do-checkbox">
@Html.CheckBoxFor(m => m.Do[i].IsSelected, isViewModeForCheckBox, new { id = "chb_do" + i, onchange = "RemoveUpload(" + i + ");", @class = "form-check-input" })
@Model.Do[i].Text
</div>
型
生成如下HTML输出:
<div class="col-lg-7 do-checkbox">
<input class="form-check-input" data-val="true" data-val-required="The IsSelected field is required." disabled=""
id="chb_do0" name="Do[0].IsSelected" onchange="RemoveUpload(0);" readonly="" type="checkbox" value="true"
aria-invalid="true">
<label id="Do[0].IsSelected-error" class="border-danger shadow-danger" for="Do[0].IsSelected"
style="display: none;"></label>
<input name="Do[0].IsSelected" type="hidden" value="false" class="valid">
Info text
</div>
型
jQuery验证:
$("form[name='reg']").validate({
ignore: ":hidden",
errorClass: "border-danger shadow-danger",
errorPlacement: function () {},
rules: {
"Reg.Name": "required",
"Do[0].IsSelected": {
required: true,
email: function (element) {
return $("input[name='Do[0].IsSelected']:not(:hidden)").is(":checked");
},
},
},
messages: {
"Reg.Name": "Info error message",
"Do[0].IsSelected": {
required: "Enter a username",
email: "Enter at least {0} characters",
},
},
invalidHandler: function (event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message =
errors == 1
? "Info 1 field missing"
: "Info " + errors + " fields missing";
if (validator.errorList.length > 0) {
for (x = 0; x < validator.errorList.length; x++) {
message += "</br>\n\u25CF " + validator.errorList[x].message;
}
}
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
submitHandler: function () {
document.forms["reg"].submit();
},
});
型
jQuery验证添加CSS类到第二个隐藏输入,并且不显示消息我也使用了additionals.methods.js扩展库,但是没有成功
1条答案
按热度按时间bybem2ql1#
我认为问题在于jQueryValidate默认忽略隐藏的输入字段,所以它不会验证由@Html.CheckBoxFor助手生成的隐藏复选框。
解决这个问题的一种方法是使用validate()方法的ignore选项来指定隐藏的复选框应该包含在验证中。例如,您可以使用以下代码:
字符串
如果你使用.net core >= v5,那么你可以在startup中添加这个:
型
如果你不能使用core,另一个替代方法是编写一个自定义的html助手,它可以生成没有隐藏字段的复选框,例如:
型
如果不行就告诉我我可以再深入调查一下。