[英]How to set unobtrusive validation for UI elements rendered using jQuery
I have a Razor view which renders some drops downs using HTML helpers and others using jQuery DataTable , 我有一个Razor视图,它使用HTML帮助器和其他使用jQuery DataTable的渲染器,
<div class="form-group">
@Html.LabelFor(model => model.CarTyres, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-2">
@Html.ListBoxFor(model => model.SelectedCarTyres, Model.CarTyres, htmlAttributes: new { @class = "selectpicker form-control", @multiple = "", @data_actions_box = "true" })
@Html.ValidationMessageFor(model => model.SelectedCarTyres, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Drivers, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-2">
@Html.ListBoxFor(model => model.SelectedDrivers, Model.Drivers, htmlAttributes: new { @class = "selectpicker form-control", @multiple = "", @data_actions_box = "true" })
@Html.ValidationMessageFor(model => model.SelectedDrivers, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CarJacks, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-5">
<table id="filtersTable">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
</tr>
</thead>
</table>
</div>
@Html.ValidationMessageFor(model => model.CarJacksCheckBox, "", new { @class = "text-danger" })
</div>
In my model , I am setting the required to true so that when I check Model.IsValid()
will return false if any of those items are not set, and that works fine. 在我的模型中,我将required设置为true,这样当我检查
Model.IsValid()
时,如果没有设置任何这些项,它将返回false,并且工作正常。
public class ReportViewModel
{
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
[Required]
public ICollection<int> SelectedCarTyres { get; set; }
public IEnumerable<SelectListItem> CarTyres { get; set; }
[Required]
public ICollection<int> SelectedDrivers { get; set; }
public IEnumerable<SelectListItem> Drivers { get; set; }
public IEnumerable<CarJackViewModel> CarJacks { get; set; }
[Required]
public string SelectedSampleTime { get; set; }
public IEnumerable<SelectListItem> SampleTimes { get; set; }
[Required]
public IEnumerable<int> CarJacksCheckBox { get; set; }
}
To make javascrip data tables required , I copied the vallidation attributes on checkbox(es) like following: 为了使javascrip数据表成为必需,我在复选框上复制了vallidation属性,如下所示:
$('#filtersTable').DataTable(
{
"iDisplayLength": 25,
"ajax": {
"url": "/CarJacks/Loaddata",
"type": "GET",
"datatype": "json"
},
"columns": [
{
"data": "IsSelected",
"render": function (data, type, row) {
if (type === 'display') {
return '<input type="checkbox" name="CarJacksCheckBox" class="editor-active" data-val="true" data-val-required="The CarJacks field is required.">';
}
return data;
}
],
"rowCallback": function (row, data) {
//Removed for Brevity
}
}
);
But still , I am not getting any client side validation when none of the CarJackCheckBox are selected. 但是,当没有选择任何CarJackCheckBox时,我没有得到任何客户端验证。
Though (ModelState.IsValid)
is returning false, $(form).valid()
returning true and hence no errors on client side. 虽然
(ModelState.IsValid)
返回false,但$(form).valid()
返回true,因此客户端没有错误。
Which piece am I missing ? 我错过了哪一件?
You cannot use MVC's client side validation because validation rules are applied to form controls, and you do not (and cannot) create a form control for your IEnumerable<int> CarJacksCheckBox
property. 您不能使用MVC的客户端验证,因为验证规则应用于表单控件,您不能(也不能)为您的
IEnumerable<int> CarJacksCheckBox
属性创建表单控件。 You need to write your own script to validate that at least one checkbox is required. 您需要编写自己的脚本来验证是否至少需要一个复选框。
Remove the data-val-*
attributes from the checkbox (since they are pointless) and add an additional class name, say carjacks
to use in the script as a jQuery selector. 从复选框中删除
data-val-*
属性(因为它们毫无意义)并添加一个额外的类名,比如carjacks
在脚本中用作jQuery选择器。
Then include the following scripts (note these mimic 'lazy' validation - it first validates on submit, and thereafter on clicking a checkbox) 然后包括以下脚本(请注意这些模仿'lazy'验证 - 它首先在提交时验证,然后在单击复选框时验证)
var validateOnClick = false; // for lazy validation
var requiredCarJacks = 1;
var carJacks= $('.carjacks');
var errorMessage = 'Select at least 1 car jack';
var errorElement = $('span[data-valmsg-for="CarJacksCheckBox"]');
function validateCarJacks() {
var selectedCarJacks = carJacks.filter(':checked').length;
var isValid = selectedCarJacks > requiredCarJacks ;
if (!isValid) {
errorElement.addClass('field-validation-error').removeClass('field-validation-valid').text(errorMessage);
} else {
errorElement.addClass('field-validation-valid').removeClass('field-validation-error').text('');
}
return (isValid);
}
$('form').submit(function () {
if (!validateCarJacks()) {
validateOnClick = true; // signal that we should now validate the .click() event
return false; // prevent submit
}
});
carJacks.click(function() {
if (validateOnClick) {
validateCarJacks();
}
})
You have to add one line after jQuery DataTable is initialized. 初始化jQuery DataTable后,您必须添加一行。
$.validator.unobtrusive.parse('form')
Also, You can use using jQuery Selector 此外,您可以使用jQuery Selector
$.validator.unobtrusive.parse('#formTable')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.