JQuery 验证器在部分视图上仅验证 1 个字段

我遇到了一个问题，即许多字段中只有 1 个实际上在 Partial View 上进行了验证。下面是我正在使用的部分视图的一部分(由于长度而缩小(：

<script type="text/javascript">
$('#form1').validate({
onkeyup: false,
onclick: true,
showErrors: function (errorMap, errorList) {
$('#errors').html('');
$.each(errorList, function () {
var element = this.element;
var labelText = $(element).parent().parent().find('label').html();
var error = this.message;
$('#errors').append($("<li>").text(labelText + ": " + error));
});
}
});
$('#form1').submit(function (e) {
e.preventDefault();
});
var form1 = $('#form1');
form1.removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form1);

<form class="package-editor-panel col-md-12" style="width:100%;height:100%;overflow:scroll;" id="form1">
<div class="package-editor-left col-md-6">
<div class="col-md-12">
<label class="col-md-4">Package Rule Name</label>
<div class="col-md-8">
@(Html.Kendo().TextBoxFor(m => m.PackageRuleName))
</div>
</div>
</div>
<div class="package-editor-right col-md-6">
<div class="col-md-12">
<label class="col-md-4">Template Setting</label>
<div class="col-md-8">
@(Html.Kendo().DropDownListFor(m => m.TemplateSetting)
.DataTextField("PackageTemplateDesc")
.DataValueField("PackageTemplateId")
.DataSource(datasource => { datasource.Read(read => read.Action("GetPackageTemplates", "Package")); })
.OptionLabel("Select Template Setting")
.IgnoreCase(true)
.AutoWidth(true)
.AutoBind(true)
.ValuePrimitive(true)
)
</div>
</div>
<div class="col-md-12">
<ul id="errors" style="color:red;padding-left:2em"></ul>
</div>
</div>

以下是我正在使用的模型示例：

public class PackageModel
{
[Required]
[Display(Name = "Template Setting")]
public Int32? TemplateSetting { get; set; }
[Required]
[Display(Name = "Package Rule Name")]
public String PackageRuleName { get; set; }
}

我有一个 onclick 事件，该事件触发了上面未包含的表单提交。

由于我正在使用 Html 编辑控件，因此两个字段的 id 和名称都在生成的 html 中。页面上没有其他表单。为什么这只会验证单个字段？另外，我该怎么做才能确保所有字段都经过验证？

为表单生成的 html 标记如下所示：

<form class="package-editor-panel col-md-12" style="width:100%;height:100%;overflow:scroll;" id="form1" novalidate="novalidate">
<div class="package-editor-left col-md-6">
<div class="col-md-12">
<label class="col-md-4">Package Rule Name</label>
<div class="col-md-8">
<input class="k-textbox" data-val="true" data-val-required="The Package Rule Name field is required." id="PackageRuleName" name="PackageRuleName" value="Jason">
</div>
</div>
<div class="col-md-12">
<label class="col-md-4">Claim Type</label>
<div class="col-md-8">
<span title="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="ClaimTypeId_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="eb8775e6-57e4-408c-9772-2239dec56c91" style=""><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Statement Claim</span><span unselectable="on" class="k-select" aria-label="select"><span class="k-icon k-i-arrow-60-down"></span></span></span><input data-val="true" data-val-required="The Claim Type field is required." id="ClaimTypeId" name="ClaimTypeId" type="text" value="2" data-role="dropdownlist" style="display: none;"></span><script>kendo.syncReady(function(){jQuery("#ClaimTypeId").kendoDropDownList({"autoBind":true,"autoWidth":true,"dataTextField":"ClaimTypeDesc","dataValueField":"ClaimTypeId","ignoreCase":true,"value":"2","valuePrimitive":true,"dataSource":{"transport":{"read":{"url":"/Package/GetClaimTypes","type":"GET"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>
</div>
</div>
<div class="col-md-12">
<label class="col-md-4">Divisions</label>
<div class="col-md-8">
<div class="k-widget k-multiselect k-header k-multiselect-clearable" deselectable="on" title="" style=""><div class="k-multiselect-wrap k-floatwrap" deselectable="on"><ul role="listbox" deselectable="on" class="k-reset" id="DivisionIds_taglist"><li class="k-button" deselectable="on"><span deselectable="on">Commercial</span><span unselectable="on" aria-label="delete" class="k-select"><span class="k-icon k-i-close"></span></span></li></ul><input class="k-input" style="width: 30px;" accesskey="" autocomplete="off" role="listbox" title="" aria-expanded="false" tabindex="0" aria-owns="DivisionIds_taglist DivisionIds_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="8630464c-f969-4f52-bb7d-bb4296830bef"><span unselectable="on" class="k-icon k-clear-value k-i-close" title="clear" role="button" tabindex="-1"></span><span class="k-icon k-i-loading k-hidden"></span></div><select data-value-primitive="true" id="DivisionIds" multiple="multiple" name="DivisionIds" data-role="multiselect" aria-disabled="false" style="display: none;"><option value="1" selected="">Commercial</option><option value="7">UK Commercial</option></select><span style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 31px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span></div><script>kendo.syncReady(function(){jQuery("#DivisionIds").kendoMultiSelect({"change":function() { editorComposite.refresh('parents') },"dataBound":function() { editorComposite.set('divisions') },"autoBind":false,"autoClose":false,"autoWidth":true,"dataTextField":"DivisionName","dataValueField":"DivisionId","highlightFirst":true,"ignoreCase":true,"placeholder":"Select Divisions","valuePrimitive":true,"dataSource":{"transport":{"read":{"url":"/Package/GetDivisions","data":editorComposite.clients,"type":"POST"},"prefix":""},"schema":{"errors":"Errors"}},"value":"1"});});</script>
</div>
</div>
<div class="col-md-12">
<label class="col-md-4">Parent Project</label>
<div class="col-md-8">
<div class="k-widget k-multiselect k-header k-multiselect-clearable" deselectable="on" title="" style=""><div class="k-multiselect-wrap k-floatwrap" deselectable="on"><ul role="listbox" deselectable="on" class="k-reset" id="ParentIds_taglist"><li class="k-button" deselectable="on"><span deselectable="on">AZN201612US</span><span unselectable="on" aria-label="delete" class="k-select"><span class="k-icon k-i-close"></span></span></li><li class="k-button" deselectable="on"><span deselectable="on">AZN201712US</span><span unselectable="on" aria-label="delete" class="k-select"><span class="k-icon k-i-close"></span></span></li></ul><input class="k-input" style="width: 30px;" accesskey="" autocomplete="off" role="listbox" title="" aria-expanded="false" tabindex="0" aria-owns="ParentIds_taglist ParentIds_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="e4a8591b-5fc0-4dfd-a552-fa56dee6932b"><span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span class="k-icon k-i-loading k-hidden"></span></div><select data-value-primitive="true" id="ParentIds" multiple="multiple" name="ParentIds" data-role="multiselect" aria-disabled="false" style="display: none;"><option value="3635">AZN200812US</option><option value="3637">AZN200912US</option><option value="3639">AZN201112US</option><option value="3641">AZN201306US</option><option value="5011">AZN201412US</option><option value="6160">AZN201512US</option><option value="7507">AZN201612US</option><option value="8979">AZN201712US</option></select><span style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 31px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span></div><script>kendo.syncReady(function(){jQuery("#ParentIds").kendoMultiSelect({"change":function() { editorComposite.refresh('projects') },"dataBound":function() { editorComposite.set('parents') },"autoBind":false,"autoClose":false,"autoWidth":true,"dataTextField":"ProjectNumber","dataValueField":"ProjectId","highlightFirst":true,"ignoreCase":true,"placeholder":"Select Parent Projects","valuePrimitive":true,"dataSource":{"transport":{"read":{"url":"/Package/GetParents","data":editorComposite.clientsandprojects,"type":"POST"},"prefix":""},"schema":{"errors":"Errors"}},"value":"7507,8979"});});</script>
</div>
</div>
<div class="col-md-12">
<label class="col-md-4">Project</label>
<div class="col-md-8">
<div class="k-widget k-multiselect k-header k-multiselect-clearable" deselectable="on" title="" style=""><div class="k-multiselect-wrap k-floatwrap" deselectable="on"><ul role="listbox" deselectable="on" class="k-reset" id="ProjectIds_taglist"><li class="k-button" deselectable="on"><span deselectable="on">AZNN6A</span><span unselectable="on" aria-label="delete" class="k-select"><span class="k-icon k-i-close"></span></span></li><li class="k-button" deselectable="on"><span deselectable="on">AZNCC7</span><span unselectable="on" aria-label="delete" class="k-select"><span class="k-icon k-i-close"></span></span></li><li class="k-button" deselectable="on"><span deselectable="on">AZNAC7</span><span unselectable="on" aria-label="delete" class="k-select"><span class="k-icon k-i-close"></span></span></li></ul><input class="k-input" style="width: 30px;" accesskey="" autocomplete="off" role="listbox" title="" aria-expanded="false" tabindex="0" aria-owns="ProjectIds_taglist ProjectIds_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="595bbfd9-2484-42f3-9a63-cd5bc9a418f2"><span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span class="k-icon k-i-loading k-hidden"></span></div><select data-value-primitive="true" id="ProjectIds" multiple="multiple" name="ProjectIds" data-role="multiselect" aria-disabled="false" style="display: none;"><option value="7847">AZNAC7</option><option value="8727">AZNBC7</option><option value="7753">AZNCC7</option><option value="8625">AZNGC7</option><option value="7845">AZNHC7</option><option value="7844">AZNKC7</option><option value="7508">AZNL6A</option><option value="8624">AZNMC7</option><option value="7506">AZNN6A</option><option value="7509">AZNN6B</option><option value="7752">AZNN6I</option><option value="8017">AZNN6Q</option><option value="7881">AZNN6X</option><option value="8980">AZNNA7</option><option value="9189">AZNNB7</option><option value="7756">AZNNC7</option><option value="9126">AZNNE7</option><option value="9242">AZNNI7</option><option value="9187">AZNNX7</option><option value="8726">AZNSC7</option><option value="7846">AZNVC7</option><option value="8623">AZNWC7</option></select><span style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 31px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span></div><script>kendo.syncReady(function(){jQuery("#ProjectIds").kendoMultiSelect({"dataBound":function() { editorComposite.set('projects') },"autoBind":false,"autoClose":false,"autoWidth":true,"dataTextField":"ProjectNumber","dataValueField":"ProjectId","highlightFirst":true,"ignoreCase":true,"placeholder":"Select Projects","valuePrimitive":true,"dataSource":{"transport":{"read":{"url":"/Package/GetProjects","data":editorComposite.parents,"type":"POST"},"prefix":""},"schema":{"errors":"Errors"}},"value":"7506,7753,7847"});});</script>
</div>
</div>
<div class="col-md-12">
<label class="col-md-4">Package Type</label>
<div class="col-md-8">
<div class="k-widget k-multiselect k-header k-multiselect-clearable" deselectable="on" title="" style=""><div class="k-multiselect-wrap k-floatwrap" deselectable="on"><ul role="listbox" deselectable="on" class="k-reset" id="PackageTypeIds_taglist"><li class="k-button" deselectable="on"><span deselectable="on">DPS</span><span unselectable="on" aria-label="delete" class="k-select"><span class="k-icon k-i-close"></span></span></li><li class="k-button" deselectable="on"><span deselectable="on">DPS-V</span><span unselectable="on" aria-label="delete" class="k-select"><span class="k-icon k-i-close"></span></span></li></ul><input class="k-input" style="width: 30px;" accesskey="" autocomplete="off" role="listbox" title="" aria-expanded="false" tabindex="0" aria-owns="PackageTypeIds_taglist PackageTypeIds_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="dc5f3f3e-9bab-4e0c-bf2e-27e0d0688e5b"><span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span class="k-icon k-i-loading k-hidden"></span></div><select data-val="true" data-val-required="The Package Type field is required." data-value-primitive="true" id="PackageTypeIds" multiple="multiple" name="PackageTypeIds" data-role="multiselect" aria-disabled="false" style="display: none;"><option value="410">DPS</option><option value="411">DPS-V</option><option value="412">OCV</option><option value="413">RD</option><option value="415">RFD-A</option><option value="414">RFD-D</option></select><span style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 31px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span></div><script>kendo.syncReady(function(){jQuery("#PackageTypeIds").kendoMultiSelect({"dataBound":function() { editorComposite.set('packagetypes') },"autoBind":true,"autoClose":false,"autoWidth":true,"dataTextField":"PackageTypeName","dataValueField":"PackageTypeId","highlightFirst":true,"ignoreCase":true,"placeholder":"Select Package Type","valuePrimitive":true,"dataSource":{"transport":{"read":{"url":"/Package/GetPackageTypes"},"prefix":""},"schema":{"errors":"Errors"}},"value":"410,411"});});</script>
</div>
</div>
</div>
<div class="package-editor-right col-md-6">
<div class="col-md-12">
<label class="col-md-4">Report</label>
<div class="col-md-8">
<span title="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="ReportId_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="792f64d4-dd9f-4487-8fb9-41d496c5c1a9" style=""><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Select Report Name</span><span unselectable="on" class="k-select" aria-label="select"><span class="k-icon k-i-arrow-60-down"></span></span></span><input id="ReportId" name="ReportId" type="text" value="" data-role="dropdownlist" style="display: none;"></span><script>kendo.syncReady(function(){jQuery("#ReportId").kendoDropDownList({"autoBind":true,"autoWidth":true,"dataTextField":"ReportName","dataValueField":"ReportId","ignoreCase":true,"optionLabel":"Select Report Name","valuePrimitive":true,"dataSource":{"transport":{"read":{"url":"/Package/GetReports"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>
</div>
</div>
<div class="col-md-12">
<label class="col-md-4">Package Format</label>
<div class="col-md-8">
<span title="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="PackageFormat_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="ea6e9399-3cf4-4c8f-8588-25375cf5ac6a" style=""><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">PDF</span><span unselectable="on" class="k-select" aria-label="select"><span class="k-icon k-i-arrow-60-down"></span></span></span><input data-val="true" data-val-required="The Package Format field is required." id="PackageFormat" name="PackageFormat" type="text" value="432" data-role="dropdownlist" style="display: none;"></span><script>kendo.syncReady(function(){jQuery("#PackageFormat").kendoDropDownList({"autoBind":true,"autoWidth":true,"dataTextField":"PackageFormatName","dataValueField":"PackageFormatId","ignoreCase":true,"value":"432","valuePrimitive":true,"dataSource":{"transport":{"read":{"url":"/Package/GetPackageFormats"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>
</div>
</div>
<div class="col-md-12">
<label class="col-md-4">Image Type</label>
<div class="col-md-8">
<span title="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="ImageTypeId_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="204647ae-964d-4450-a35d-c687409e3e85" style=""><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Authorization</span><span unselectable="on" class="k-select" aria-label="select"><span class="k-icon k-i-arrow-60-down"></span></span></span><input id="ImageTypeId" name="ImageTypeId" type="text" value="416" data-role="dropdownlist" style="display: none;"></span><script>kendo.syncReady(function(){jQuery("#ImageTypeId").kendoDropDownList({"autoBind":true,"autoWidth":true,"dataTextField":"ImageDesc","dataValueField":"ImageId","ignoreCase":true,"optionLabel":"Select Image Type","value":"416","valuePrimitive":true,"dataSource":{"transport":{"read":{"url":"/Package/GetImages"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>
</div>
</div>
<div class="col-md-12">
<label class="col-md-4">Template Order</label>
<div class="col-md-8">
<span class="k-widget k-numerictextbox" style="min-width: 100%;"><span class="k-numeric-wrap k-state-default"><input type="text" class="k-formatted-value k-input" title="2" tabindex="0" role="spinbutton" aria-valuemin="1" aria-valuenow="2" aria-disabled="false" style="min-width: 100%; display: inline-block;"><input data-val="true" data-val-required="The Template Order field is required." id="TemplateOrder" min="1" name="TemplateOrder" style="min-width: 100%; display: none;" type="text" value="2" data-role="numerictextbox" role="spinbutton" aria-valuemin="1" class="k-input" aria-valuenow="2" aria-disabled="false"><span class="k-icon k-i-warning" style="display: none;"></span><span class="k-select"><span unselectable="on" class="k-link k-link-increase" aria-label="Increase value" title="Increase value"><span unselectable="on" class="k-icon k-i-arrow-60-up"></span></span><span unselectable="on" class="k-link k-link-decrease" aria-label="Decrease value" title="Decrease value"><span unselectable="on" class="k-icon k-i-arrow-60-down"></span></span></span></span></span><script>kendo.syncReady(function(){jQuery("#TemplateOrder").kendoNumericTextBox({"decimals":0,"format":"n0"});});</script>
</div>
</div>
<div class="col-md-12">
<label class="col-md-4">Stamp Page</label>
<div class="col-md-8">
<input checked="checked" class="k-checkbox" data-val="true" data-val-required="The Stamp Page field is required." id="StampPage" name="StampPage" type="checkbox" value="true"><label class="k-checkbox-label" for="StampPage"> </label><input name="StampPage" type="hidden" value="false">
</div>
</div>
<div class="col-md-12">
<label class="col-md-4">One Time Per Package</label>
<div class="col-md-8">
<input class="k-checkbox" data-val="true" data-val-required="The One Time Per Package field is required." id="OneTimePerPackage" name="OneTimePerPackage" type="checkbox" value="true"><label class="k-checkbox-label" for="OneTimePerPackage"> </label><input name="OneTimePerPackage" type="hidden" value="false">
</div>
</div>
<div class="col-md-12">
<label class="col-md-4">Template Setting</label>
<div class="col-md-8">
<span title="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="TemplateSetting_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="e0e595c8-03d5-4164-be27-5488ed9a6b0f" style=""><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Grouped per Claim</span><span unselectable="on" class="k-select" aria-label="select"><span class="k-icon k-i-arrow-60-down"></span></span></span><input data-val="true" data-val-required="The Template Setting field is required." id="TemplateSetting" name="TemplateSetting" type="text" value="434" data-role="dropdownlist" style="display: none;"></span><script>kendo.syncReady(function(){jQuery("#TemplateSetting").kendoDropDownList({"autoBind":true,"autoWidth":true,"dataTextField":"PackageTemplateDesc","dataValueField":"PackageTemplateId","ignoreCase":true,"optionLabel":"Select Template Setting","value":"434","valuePrimitive":true,"dataSource":{"transport":{"read":{"url":"/Package/GetPackageTemplates"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>
</div>
</div>
<div class="col-md-12">
<ul id="errors" style="color:red;padding-left:2em"></ul>
</div>
</div>

我也在使用不显眼的验证：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

阅读showErrors的文档：

自定义消息显示处理程序。获取错误映射作为第一个参数和错误数组作为第二个，在上下文中调用的验证器对象。参数仅包含这些元素当前已验证，在执行时可以是单个元素对焦点输出或键控进行验证。

根据上面的定义，您只会看到当前正在验证的元素的错误，而不是整个表单。新验证完成后，新的消息映射不会保留以前的消息。如果验证了一个字段，则映射仅包含一个字段的消息，依此类推。

参考这个答案：https://stackoverflow.com/a/44599142/594235

相反，请尝试wrapper和errorLabelContainer选项，当它们一起使用时，旨在自动保留整个表单的待处理消息的更新列表...

wrapper: "li",  // <- the LABEL will be inside of this
errorLabelContainer: "#errorSummaryList",  // <- your UL element

演示：jsfiddle.net/y9o8du3q/

不幸的是，这是由于缺少 name 属性的 html 元素引起的。如果没有 name 属性，验证将无法正常运行。

相关内容

最新更新

热门标签：