Validation errors summary: using * and then messages

[Nuno]

His this possible?

My doubt is very simple. I would like that when the form is submit (on button click), if there is validation errors, every field in error should be marked with and asterisk (*) and a summary of messages should be displayed on some placeholder on the view. Is this possible out of the box or will it have to be implemented in some way?

This would be done using UI for ASP.NET MVC wrappers and data annotations on the models.

Thanks!

[Rosen]

Hi Nuno,

The requested functionality is not available out-of-the-box. However, it can be implemented with few lines of JavaScript. For example

@model Kendo.Mvc.Examples.Models.ProductViewModel

<div id="errors"> </div>

@{using (Html.BeginForm())
  {
   @Html.EditorForModel()
   <button>Click Me</button>
  }}

<script>
    $("form").kendoValidator({
        errorTemplate: "<span>*</span>", // change the default message container to show only an *
        validate: function (e) { // handle the validate event to build the error list
            var html = "";
            if (!e.valid) {
                var errors = this.errors();
                html += "<ul>";
                for (var i = 0; i < errors.length; i++) {
                    html += "<li>" + errors[i] + "</li>";
                }

                html += "</ul>";
            }
            $("#errors").html($(html));
        }
    });
</script>

Regards,
Rosen
Telerik

[Waz]

Would it not make more sense that the showErrors function target the @Html.ValidationSummary() div?

So that markup will work with both MVC Validation and Kendo?

And should that not work out-of-the-box?

[Rosen]

Hello WHuis,

As I have mentioned, there is no validation summery widget available out-of-the-box.

The approach demonstrated in the snippet allows to show the errors in a layout which developer find most applicable for the given scenario. Note that Kendo UI is not used only in ASP.NET MVC framework, but on various different platforms.

Regards,
Rosen
Telerik

 

 

[Oleksandr]

Hello Rosen,

I'm also struggling with validation: Kendo client-side validator, kendo model validation rules, MVC standard validation approach, server-side validation handling. I spent already few days trying to figure out how to make all that consistent and working together.

I see few problems with kendo here:

1.You implemented some of the core concepts (such as validation) partially. For example, you customized client validation messages to become popups, but you don't provide a customized validation summary control which matches the style. I don't care about other platforms - you don't even have that simple control for single ASP.NET MVC platform you pretend to support with HTML extensions!
2. On one hand, Telerik team says kendo is just a set of controls, replacements for plain textboxes, jQuery datePickers etc., but on the other hand you implement your kendoValidator which is definitely not a control.I was surprised  Telerik provide client-side validator, MVC extensions for controls, but couldn't provide any example how to make them work together (including how to make server-side validation messages display on client side). MVC approach is clear and is working fine. With Telerik it is no longer the case (or at least a lot of people can't figure out how to make it working. The number of similar questions is enormous). So if you don't provide a complete solution, why do you release it at all?

3. Similar situation with grid control. You pretend to support remote binding, but to support validation I need to manually handle it on every server-request. Why do you support making server-side requests, getting their response, but you do not support a protocol for validation error response? Do you think you can ignore the possibility of server-side validation errors since you only implement client-side controls?

All in all, Kendo seem to be half-baked product because of such an obvious things not being taken into account. 

[Rosen]

Hello Oleksandr,

Thanks for your feedback.

The Kendo UI Validator is designed to mimic the HTML5 form validation. It does not have ASP.NET MVC specific version nor it is available as a 'wrapper'. We just provide a built-in way to for it to read and addapt the ASP.NET MVC serialized validation rules setting. Thus, it should be used the same way as with any other server-side platform. Indeed, there is no direct integration with server-side ASP.NET MVC validation errors as it only lives on the client-side and it is not aware that there are server-side validation errors.

Regarding the validation summary. As stated before the Kendo UI does not provide such widget at all, this is why there is also no such widget for ASP.NET MVC framework.

However, if you feel that such functionality are valuable, please consider adding them as a feature request in our user voice portal.

Regards,
Rosen
Telerik by Progress

 

 

[Oleksandr]

Thank you for quick response, Rosen.

Actually, user voice portal already contains request to support server-side validation and it is one of the top-voted, so I'm not the only person experiencing this problem.

I see your point, but don't you agree that it is not possible to easily replace a MVC view using standard HTML controls (and obviously validating them on server-side and client side), with Kendo UI client-side controls using Kendo MVC extensions or any other tool, provided by Telerik? It needs a lot of custom development which is repetitive across pages, projects and all your clients.

It would be fine if you just replace HTML and jquery-like controls, leaving existing MVC mechanisms work consistently. But after using Kendo controls the very basic concepts, such as server-side validation, are completely broken.

And not only Telerik team decided not to provide a standard support for such functionality, you even don't make recommendations how it can be done. Support tickets doesn't help a lot either. This creates a gap which is hard to bypass when deciding to use Kendo.

Yesterday I ended up with implementing my own extension method KendoValidationMessageFor() and replacing all MVC ValidationMessageFor() calls with it. I'm not sure whether it's correct approach or no, but I'm sure I've reivented the wheel. I haven't decided yet what to do with grids, validation within Kendo templates, validation of MVVM-bound views and some other problems I foresee.

All those problems didn't exist in native MVC and appeared just in Kendo framework (well, in all similar client-side frameworks to be honest). But Telerik decide to make every developer invent his own solution to common problems instead of tackling them as part of your framework.

PS: I'm sure it would be super-helpful for developers like me (and maybe for telerik team as well to understand our problems) if somebody at Telerik really tries to use their framework for real-world application with at least single complex view (e.g. grid, edit form of which  is a complex MVVM-bound view, containing few dozen fields, grouped into tabstrip panes, some 'fields' are grids or listviews itself, datetime fields which display server-timezone time for any client; grid should be groupable (date-only), sortable (date+time) and filterable by this datetime field; it goes without saying everything should support server- and client-side validation, handle errors and edit operation must be transactional). Even it it won't be official example, it will show direction for custom-development of solutions to common problems.

[Rosen]

Hello Oleksandr,

 

Thanks for your feedback we appreciate it and will consider it for future version of the product.
 

Regards,
Rosen
Telerik by Progress