Troubleshooting

New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Validation

This page provides solutions to common issues you may encounter while implementing the client-side validation.

Common Validation Issues

Validation Tooltips Are Shown in Widget Wrappers When Using the Validator

By default, the Tooltip is added right after the input so that if the input is used for a widget, the Tooltip is added inside the wrapper element and is not displayed correctly.

Solution

Customize the Tooltip position by using either of the following approaches:

  • Use the ValidationMessage or ValidationMessageFor helpers for the property.

    @Html.Kendo().NumericTextBoxFor(model => model.UnitPrice)
@Html.ValidationMessageFor(model => model.UnitPrice)

  • Use the approach demonstrated in the introductory article on the Kendo UI Validator to add a placeholder.

Widgets Are Hidden after Postbacks When Using jQuery Validation

If the client-side validation does not prevent the form to be posted and the server-side validation fails for a property, the input-validation-error class is added to the input. For styling purposes, custom classes assigned to the inputs are copied to the wrapper element and because all elements with the error class will be hidden on validation, the widget will be hidden too.

Solution

To avoid this behavior, either implement a client-side validation for the rule that caused the validation to fail on the server, or remove the class from the wrapper elements after the initialization of the widgets.

@using (Html.BeginForm()) {
    //omitted for brevity
}

<script type="text/javascript">
    $(function () {
        $(".k-widget").removeClass("input-validation-error");
    });
</script>

Globalized Dates and Numbers Are Not Recognized As Valid When Using the Validator

The Kendo UI Validator uses the current Kendo UI culture to determine whether a value is in a valid format.

Solution

In order for the values to be recognized as valid, use the same culture on the client and on the server as described in the article on globalization.

If the above solution is not feasible, because a custom date format is used, then the build-in mvcdate rule that comes from kendo.aspnetmvc.min.js needs to be overridden.

<script src="../kendo/js/kendo.aspnetmvc.min.js"></script>
<script>
    kendo.ui.validator.rules.mvcdate = function (input) {
        //use the custom date format here
        //kendo.parseDate - https://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-parseDate

        return input.val() === "" || kendo.parseDate(input.val(), "dd/MM/yyyy") !== null;
    }
</script>

Globalized Dates and Numbers Are Not Recognized As Valid When Using jQuery Validation

The jQuery validation does not support globalized dates and numbers.

Solution

In order for the values to be recognized as valid when using a non-default culture, override the Validator date and number methods.

jQuery.extend(jQuery.validator.methods, {
    date: function (value, element) {
        return this.optional(element) || kendo.parseDate(value) != null;
    },
    number: function (value, element) {
        return this.optional(element) || kendo.parseFloat(value) != null;
    }
});

See Also

In this article
Related articles
Not finding the help you need? Improve this article