CODEWITHSUNDEEP
htmlvalidationkendo-uidata-annotationskendo-asp.net-mvc
ChristyPiffat
ChristyPiffat

Reputation: 379

Creating an email input with Kendo-UI

My company is using KendoUI with ASP.NET MVC for our input forms. We have data annotations on most of our model properties, and the validation was working correctly with the Html Helpers. Once we replaced Html.TextBoxFor with Html.Kendo().TextBoxFor, however, the inputs all became the default type=text instead of pulling the type from the data annotation.

I can force an email type to be created by including type="email" in the HtmlAttributes section for each KendoUI widget. However, since that was automatic previously, it seems we are going backwards by using the KendoUI widgets. Am I missing something on this? My current data annotation is the following:

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

Also, if I add the type="email", a new Kendo validation message shows up when I do not have a correct email. This does not happen for any of the other validations, which appear where the Html.ValidationMessageFor is located. This new Kendo validation message has a different style and appears directly under the <input/> tag as a <label>. Other than using CSS to hide this label, is there another way to show only one validation message when a type is added?

Thanks in advance!

Upvotes: 0

Views: 3461

Answers (1)

Gene R
Gene R

Reputation: 3744

Kendo validation supports Required StringLength Range RegularExpression data annotations (http://docs.telerik.com/kendo-ui/aspnet-mvc/validation)

But for supporting [EmailAddress(...)] annotation you can use this kendo custom global validation rule (as i do in my projects):

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;
}

Same to hide kendo validation tooltips i am using this global css rule:

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

Upvotes: 2

Related Questions