![](/img/trans.png)
[英]How to properly validate form using jquery Unobtrusive Validation?
[英]How to set unobtrusive validation for UI elements rendered using jQuery
我有一個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>
在我的模型中,我將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; }
}
為了使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
}
}
);
但是,當沒有選擇任何CarJackCheckBox時,我沒有得到任何客戶端驗證。
雖然(ModelState.IsValid)
返回false,但$(form).valid()
返回true,因此客戶端沒有錯誤。
我錯過了哪一件?
您不能使用MVC的客戶端驗證,因為驗證規則應用於表單控件,您不能(也不能)為您的IEnumerable<int> CarJacksCheckBox
屬性創建表單控件。 您需要編寫自己的腳本來驗證是否至少需要一個復選框。
從復選框中刪除data-val-*
屬性(因為它們毫無意義)並添加一個額外的類名,比如carjacks
在腳本中用作jQuery選擇器。
然后包括以下腳本(請注意這些模仿'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();
}
})
初始化jQuery DataTable后,您必須添加一行。
$.validator.unobtrusive.parse('form')
此外,您可以使用jQuery Selector
$.validator.unobtrusive.parse('#formTable')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.