cod*_*urn 3 javascript jquery unobtrusive-validation asp.net-mvc-4 knockout.js
我正在使用以下内容:
我的Knockout View Model模板如下所示:
<tbody data-bind="foreach:recipientEmailAddressList">
<tr>
<td class="no-padding" style="width:330px">
<input class="suppress-ms-clear input-parameter full-width" data-bind="value:EmailAddress, hasfocus:EmailAddress.focused" name="EmailAddresses" data-val="true" data-val-email="Please enter a valid email address.">
</td>
<td class="no-padding align-right">
<div class="delete" data-bind="visible: $root.recipientEmailAddressList().length > 1">
<a href="" data-bind="click:$root.removeRecipientEmailAddress"><span class="no-wrap">X</span></a>
</div>
</td>
</tr>
</tbody>
我在MVC视图中也有以下内容:
@Html.ValidationSummary(false)
当我添加未通过验证的电子邮件时,无效元素样式正确应用于input元素,但验证摘要不会显示验证错误.同样,即使明显存在验证错误,也允许用户提交页面.
我没有任何绑定到表单的submit元素的代码.
似乎不引人注意的验证通过应用错误样式知道存在问题,但为什么它没有显示验证摘要？为什么我可以提交表格？如果我更正了电子邮件地址以使其有效,则输入上的错误样式将消失.
TLDR:"jQuery Validate"和"Microsoft jQuery Unobtrusive Validation"不能很好地协同工作(参考).删除Microsoft不显眼的验证脚本,并获取jQuery Validate对html属性验证的本机支持.它工作得更好.
详细描述:
我最近一直在努力解决这个问题,经过几个小时的研究后,我得出的结论是"jQuery Validate"和"Microsofts Unobtrusive Validation"不能很好地协同工作(参考).
从这篇文章中我收集到微软不引人注目的验证通过覆盖一些选项来扼杀了许多jQuery Validate功能.例如,加载不显眼的脚本后,将忽略任何自定义设置.这使得在JavaScript中指定自定义验证规则/行为非常困难(在我的案例中需要).
对于我的情况,我也使用KnockoutJS.我要做的第一件事就是将我的C#模型序列化为JSON模型,然后使用ko.mappings实用程序(可通过NuGet获取)将其加载到KnockoutJS中.
然后,我将数据绑定应用于我的标记,并使用KnockoutJS生成的HTML.为了让我能够进行验证,我从其中一个HTML帮助函数中复制了生成的标记TextBoxFor,并将生成的验证规则应用于我的HTML.
例如:
<data-val-required="This fields is required" .... >
虽然这个解决方案部分工作,正如您所提到的,我无法让脚本正确突出显示无效输入并显示验证摘要.
起初我认为这就是我需要做的就是让不引人注目的验证工作.但我后来发现,首先,要验证的每个元素都需要一个唯一的名称(duh),其次,不显眼的验证脚本不适用于动态生成的内容.
为了解决没有与动态生成的内容的工作不显眼的验证脚本的问题,我也跟着中发现的忠告这个,这个和这个文章.
使用下面的代码我能够让它重新解析数据:
var form = $(".formSelector")
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);
在重新分析表单之后,在动态添加任何内容之后,我能够使新生成的字段正确验证.我也发现这可能会有所帮助,但我从未结束使用它.
然后我遇到了另一个问题:我无法验证禁用/只读输入(我知道这是非常规的,但我需要它)而不会覆盖一些jQuery Validate的设置.正如我之前提到的,如果不修改不显眼的验证脚本,这是不可能的.(东旭!)
最终我偶然发现了这个网站:jQuery Validate Unobtrusive Native,它也在GitHub上.就在这时我才发现:
自从jQuery Validate 1.11.x开始,他们开始包括对动态内容的不显眼验证的原生支持
然后我放弃了微软不显眼的验证脚本.值得注意的是,Microsoft的不显眼脚本的验证属性与jQuery Validate Unobtrusive Native脚本使用的验证属性不同.因此需要此项目提供的自定义HTML帮助程序.
一旦我删除了Microsoft的不显眼的验证脚本并用jQuery Validate使用的正确属性替换了所有生成的属性,我的表单开始正确验证!:)
使用这个我建立了如何转换属性,但我相信还有很多其他的参考/例子.
另请注意,删除了Microsoft不显眼的验证脚本后,我需要使用以下代码手动设置表单上的验证:
$(".formSelector").validate({
...options...
});
这是一个与jQuery的Native Unobtrusive Validation一起使用的KnockoutJS 的例子.
您可能需要编写一些CSS来处理元素的突出显示,因为AFAICT,jQuery Validate使用的不同于Microsoft不显眼脚本的错误类.
现在,关于验证摘要:我仍然没有得到这个工作,但据我所知,你需要覆盖显示错误的默认实现.在下面的代码中,我将说明如何使用自定义工具提示来显示错误消息(参考).我假设您必须执行类似的操作,一旦在表单上检测到错误,就将错误消息应用于ValidationSummary.也就是说,运行错误列表并将它们附加到生成的验证摘要元素@Html.ValidationSummary().
我也试图实现这一点,所以一旦我弄清楚如何做到这一点,我将发布我的解决方案.
//Note this requires the bootstrap tooltip plugin...
$("form").validate({
showErrors: function (errorMap, errorList) {
// Clean up any tooltips for valid elements
$.each(this.validElements(), function (index, element) {
var $element = $(element);
$element.data("title", "") // Clear the title - there is no error associated anymore
.removeClass("error")
.tooltip("destroy");
});
// Create new tooltips for invalid elements
$.each(errorList, function (index, error) {
var $element = $(error.element);
$element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
.data("title", error.message)
.addClass("error")
.tooltip(); // Create a new tooltip based on the error messsage we just set in the title
});
},
rules: { /*.... Rules here ....*/ },
submitHandler: function (form) {
alert("This is a valid form!");
}
});
编辑:对于任何感兴趣的人是我引用的SO文章获取readonly/disabled输入以进行验证.
希望这最终会帮助某人 - 我希望我在一开始就找到了这个信息.