【发布时间】:2013-12-14 08:26:34
【问题描述】:
我正在尝试为 nullable<decimal> 实现客户端验证,其小数分隔符可以是逗号(例如:123,45)。
在我看来:
...
<div class="editor-label">
@Html.LabelFor(model => model.Turnover)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Turnover)
@Html.ValidationMessageFor(model => model.Turnover)
</div>
...
@section Scripts {
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jQueryFixes")
...scripts for this view...
}
我的 jQueryFixes 为 range() 和 number() 覆盖了 jquery.validate.js 文件:
$.validator.methods.range = function (value, element, param) {
var globalizedValue = value.replace(",", ".");
return this.optional(element) || (globalizedValue >= param[0] && globalizedValue <= param[1]);
}
$.validator.methods.number = function (value, element) {
return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/.test(value);
}
...正如许多关于此问题的帖子/问题中所建议的那样(例如:here 或 here)。
很奇怪:
当我尝试提交诸如 123,45 之类的值时,即使我已经使用 Firebug 调试了脚本并看到我的覆盖函数被调用并返回 true,我也无法提交表单.相反,无论出于何种原因,我的十进制值的 EditorFor 都被关注,我似乎无法找出原因。
(我相信我的服务器端验证 - 使用自定义活页夹等 - 工作正常,并且 不是这里的问题:我想要一些有关如何获取表单的帮助提交或为什么输入字段得到焦点,即使它看起来有效。)
编辑 1:
附加信息。在我的 BundlesConfig.cs 中:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
...
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/jQueryFixes").Include(
"~/Scripts/jQueryFixes.js"));
...
编辑 2:
在@LeftyX 建议之后,我尝试使用 Globalize 脚本(在删除我的 jQueryFixes.js 之后):
<script type="text/javascript">
...
$( document ).ready(function() {
Globalize.culture("en-US", "pt-PT");
});
$.validator.methods.number = function (value, element) {
return this.optional(element) || jQuery.isNumeric(Globalize.parseFloat(value));
}
//Fix the range to use globalized methods
jQuery.extend(jQuery.validator.methods, {
range: function (value, element, param) {
var val = Globalize.parseFloat(value);
return this.optional(element) || (val >= param[0] && val <= param[1]);
}
});
...
</script>
...但我仍然面临同样的问题:validator.methods.number 返回 true,但未提交表单,而是输入字段获得焦点。
如果我在提交时检查输入元素,我可以看到它很快从class="valid" 变为class='input-validation-error',然后又回到valid。很奇怪。
结论:
@LeftyX 为遇到相同问题的人提供了一个非常好的和完整的解决方案。
我已经为可空小数创建了一个自定义模型绑定器,但是全球化脚本和在模型/视图模型中包含文化肯定会派上用场。
我的问题的另一个原因可能是我(不小心)两次包含一些脚本。
更新(2015 年 7 月):
globalize.js 现在有点不同了。参考。到this answer 和the documentation 获取更新的步骤。
【问题讨论】:
标签: javascript jquery validation asp.net-mvc-4