Displaying a Validation Summary in a Dialog

Environment

Product	Telerik UI for ASP.NET Core Dialog
Progress Telerik UI for ASP.NET Core version	Created with the 2022.2.621 version

Description

How can I show a validation summary in the Telerik UI for ASP.NET Core Dialog?

Solution

1. Set an initial HTML content within the Dialog which will act as a container for the error messages.
2. Get the reference of the validator and attach a handler to the validate event through the .bind() configuration method.
3. Within the handler, assess if any errors have occurred by using the .errors() method. Based on the evaluation, append the error messages to the content of the Dialog and open it.

Index.cshtml

    <form id="myform">
        <input name="username" required /> <br />
        <input name="password" required /> <br />
        <button>Validate</button>
    </form>

    @(Html.Kendo().Dialog()
            .Name("SMEValidationSummary")
            .Title("SME Validation Summary")
            .Closable(false)
            .Content("<div class='errors'></div>")
            .Width(400)
            .Modal(true)
            .Visible(false)
            .Actions(actions =>
            {
                actions.Add().Text("OK").Primary(true);
            })
    )

Script.js

    $(document).ready(function(){
        var validator = $("#myform").kendoValidator().data("kendoValidator");
        validator.bind("validate", function (e) {        
                var errors = this.errors();
                
                if (errors.length) {
                    var html = "<ul style='color:red;'>";
                    for (var i = 0; i < errors.length; i++) {
                        html += "<li>" + errors[i] + "</li>";
                    }
                    html += "</ul>";
                    $(".errors").html($(html));
                    $("#SMEValidationSummary").data("kendoDialog").open();
                }
        });
    })

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.

More ASP.NET Core Dialog Resources

• ASP.NET Core Dialog Documentation

• ASP.NET Core Dialog Demos

• ASP.NET Core Dialog Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Displaying a Validation Summary in a Dialog
• Client-Side API Reference of the Dialog for ASP.NET Core
• Server-Side API Reference of the Dialog for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base