Server validation on grid popup - adding red border to invalid controls

[Tony]

Hello,

We are using custom grid popup forms for adding/updating records, and some fields have server validations, and are using the solution described here:

https://docs.telerik.com/aspnet-core/knowledge-base/grid-popup-editing-show-server-validation-errors?_ga=2.158091705.2007812860.1650987718-278551097.1647285099

This works great for displaying the validation message, but the problem we are having is that using this method doesn't change the associated control's border to red ("k-invalid") like the automatic client-side validation does for invalid entries. (Screen shots attached to show difference)

Is there a known or relatively easy way to accomplish this?  I realize that some controls, like dropdowns or date pickers, apply the k-invalid class to different html elements within the control, so this might be too tricky to solve. 

At the end of the day, this is not a major issue, although it does add inconsistency and a small level of accessibility concern to the popup forms. Any suggestions are welcome and appreciated!

Thanks!

Tony

[Tsvetomir]

Hi, Tony,

The red border comes from the k-invalid class that I could see is missing in the error event handler. What I could recommend is that you add it explicitly as follows:

    .DataSource(dataSource => dataSource
       .Ajax()
       .Events(events => events.Error("onError"))
    )

    <script>
        function onError(args) {
            var errors = args.errors;
            if (errors) {
                var grid = $("#grid").data("kendoGrid");
                grid.one("dataBinding", function (e) {
                    e.preventDefault();
                    $.each(errors, function (key, value) {
                        var message = "";
                        if ('errors' in value) {
                            $.each(value.errors, function() {
                                message += this + "\n";
                            });
                        }
                        grid.editable.element.find("[data-valmsg-for='" + key + "']").replaceWith('<div class="k-widget k-tooltip k-tooltip-validation" style="margin:0.5em"><span class="k-icon k-i-warning"></span>' + message + '<div class="k-callout k-callout-n"></div></div>').show();
                    });       
                        grid.editable.element.find("#" + key).closest("span").addClass("k-invalid");
                });
            }
        }
    </script>

I hope you find this helpful.

 

Regards,
Tsvetomir
Progress Telerik