使用 Kendo-UI 创建电子邮件输入答案

【问题标题】：Creating an email input with Kendo-UI使用 Kendo-UI 创建电子邮件输入
【发布时间】：2015-12-23 20:30:48
【问题描述】：

我的公司正在使用带有 ASP.NET MVC 的 KendoUI 作为我们的输入表单。我们的大多数模型属性都有数据注释，并且验证与 Html Helpers 一起正常工作。然而，一旦我们将 Html.TextBoxFor 替换为 Html.Kendo().TextBoxFor，所有输入都变成了默认的 type=text，而不是从数据注释中提取类型。

我可以通过在每个 KendoUI 小部件的 HtmlAttributes 部分中包含 type="email" 来强制创建电子邮件类型。然而，由于以前是自动的，所以我们似乎正在通过使用 KendoUI 小部件来倒退。我错过了什么吗？我当前的数据注释如下：

[DataType(DataType.EmailAddress, ErrorMessage ="The email address is not valid")]

另外，如果我添加 type="email"，当我没有正确的电子邮件时，会显示一条新的 Kendo 验证消息。对于出现在 Html.ValidationMessageFor 所在位置的任何其他验证，都不会发生这种情况。这个新的 Kendo 验证消息具有不同的样式，直接显示在 <input/> 标记下，为 <label>。除了使用 CSS 隐藏这个标签之外，还有其他方法可以在添加类型时只显示一个验证消息吗？

提前致谢！

【问题讨论】：

标签： html validation kendo-ui data-annotations kendo-asp.net-mvc

【解决方案1】：

剑道验证支持RequiredStringLengthRangeRegularExpression数据注解(http://docs.telerik.com/kendo-ui/aspnet-mvc/validation)

但是为了支持 [EmailAddress(...)] 注释，您可以使用这个 kendo 自定义全局验证规则（就像我在我的项目中所做的那样）：

kendo.ui.validator.rules.FixEmail = function (input) {
    var datavalemail = input.attr('data-val-email');
    if (datavalemail != null) input.attr('type', 'email').attr('data-email-msg', datavalemail);
    return true;
}

同样隐藏剑道验证工具提示，我正在使用这个全局 css 规则：

.k-tooltip-validation {
    display: none !important;
}

【讨论】：