[英]The field must be a date - DatePicker validation fails in Chrome - mvc
我有奇怪的问题。 我的日期验证在Chrome中不起作用。 我试过这个答案,但它对我不起作用。
我的模型中有这个:
[Display(Name = "Date")]
[DataType(DataType.Date)]
public DateTime Date { get; set; }
我的观点:
<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
</div>
$(document).ready(function () {
$('.picker').datepicker({
dateFormat: 'dd.mm.yy',
changeMonth: true,
changeYear: true,
selectOtherMonths: true
});
});
一切都适用于Opera和Firefox,但Chrome不喜欢这种类型的日期。 我经常收到以下错误The field 'Date' must be a date
。
有任何想法吗?
UPDATE
当代码在局部视图中时,似乎存在问题。 当我将该代码复制到主页时,验证工作正常。
我正在我的主视图中插入局部视图,就像这样:
@Html.Partial("_CreateOrEdit", Model)
上面的代码在局部视图中:
@model Pro.Web.Models.Model
<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
$(document).ready(function () {
$('.picker').datepicker({
dateFormat: 'dd.mm.yy',
changeMonth: true,
changeYear: true,
selectOtherMonths: true
});
</script>
});
UPDATE2
它毕竟不起作用。 有时它有效,有时不行。 我在日期上点击了几次,有时候验证通过。 对于同一天,可能会有正确的验证。
这是日期字段的输出html:
<div class="editor-field">
<input class="picker" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="date" name="Item.Date" type="text" value="1.1.0001. 0:00:00" />
<span class="field-validation-valid" data-valmsg-for="Item.Date" data-valmsg-replace="true"></span>
</div>
这里的情况完全相同(局部视图)
我通过删除验证属性并在服务器端执行验证来解决它:
$('#date').removeAttr("data-val-date");
在我看来,问题是MVC使用[type=date]
生成日期HTML5输入。 这导致chrome有效日期格式与系统日期格式相同。
您可以使用以下属性在MVC中将日期格式设置为与JqueryUI相同:
[DataType(DataType.Date), DisplayFormat( DataFormatString="{0:dd.MM.yy}", ApplyFormatInEditMode=true )]
第二个想法是使用文章中的代码: 使用回退到jQuery UI创建本机HTML 5 Datepicker
还有一件事。 在html输入中有一个关于日期的好主题: 有没有办法改变输入类型=“日期”格式?
我通过删除验证属性解决了这个问题
@model Pro.Web.Models.Model
<div class="editor-field">
@{ Html.EnableClientValidation(false); }
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
@{ Html.EnableClientValidation(true); }
一年后崩溃到派对有点迟了,但我已经尝试了我能找到的关于这个错误的所有解决方案,但没有一个能帮到你。 所以对于像我这样挣扎的人来说,解决这个问题是什么。
添加到jquery.validate.globalize.js及其缩小版本(取决于您使用的内容)这一小段代码的末尾。
...
$.validator.methods.range = function (value, element, param) {
var val = Globalize.parseFloat(value);
return originalMethods.range.call(this, val, element, param);
};
}(jQuery, Globalize));
Globalize.culture("en-GB");
当然,在引号内使用您自己的文化设置。
希望能帮助到你!
问题似乎是<input type="date" />
(HTML5),因为规范说有效值被定义为RFC3339 。
所以我将我的视图更改为:
<script>
$(function () {
$("#validfrom").datepicker({
altField: "#ValidFrom",
altFormat: "yy-mm-dd"
});
});
</script>
<div class="editor-label">
@Html.LabelFor(model => model.ValidFrom)
</div>
<div class="editor-field">
<input id="validfrom" type="text" name="validfrom" />
@Html.HiddenFor(model => model.ValidFrom)
@Html.ValidationMessageFor(model => model.ValidFrom)
</div>
希望能帮助到你。
我有同样的错误。 通过应用datetime作为类型来解决它,
@Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" , @type = "datetime" } })
同样只使用时间
@Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" , @type = "time" } })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.