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
- Set an initial HTML content within the Dialog which will act as a container for the error messages.
- Get the reference of the validator and attach a handler to the
validateevent through the.bind()configuration method. - 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.
<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);
})
)
$(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.