Validating dynamically inserted content

[Jesse]

I have a page that requests a partial view via AJAX and inserts it into the page. The view contains several kendo DatePickers. When I leave some of the required DatePickers empty and try to submit the form, I'm noticing my validation summary (created by @Html.ValidationSummary(false)) is not displaying anything, though submission is prevented. 

Yesterday I was receiving errors in the validation summary. I had one about a required DatePicker, that is in a hidden kendo Window being empty, and when I re-opened the window to address it, the validation error for the DatePicker was visible, but the DatePicker itself was gone. 

So these specific problems aside for the moment, my question is: I know for the standard jQuery validation and unobtrusive scripts, I have to remove the validator data from the form and then re-parse the form after inserting content dynamically. Is something similar required for kendo validation? Do I need to call kendoValidator() again?

 

What I do for the standard asp.net MVC validation:

//Remove validators and re-add them to include the new fields
var $form = $(form)
    .removeData("validator")
    .removeData("unobtrusiveValidation");

$.validator.unobtrusive.parse($form);

[Joana]

Hello Jesse,

To answer your question - there is no need to remove the validator and re-parse the form. Kendo UI Validator has validate method to fire validation and provides validation on blur by default:

https://docs.telerik.com/kendo-ui/api/javascript/ui/validator/methods/validate

https://docs.telerik.com/kendo-ui/api/javascript/ui/validator/configuration/validateonblur

You might find useful the following article regarding the Validator usage:

https://docs.telerik.com/aspnet-mvc/getting-started/validation


As for the DatePicker scenario, I would suggest that you review the following troubleshooting article which might be related to the issue:

https://docs.telerik.com/aspnet-mvc/troubleshoot/troubleshooting-validation

You could also consider adding a custom rule to handle DatePicker validation. Here is a demo and an article illustrating such custom rules:

https://demos.telerik.com/kendo-ui/validator/custom-validation

https://docs.telerik.com/kendo-ui/api/javascript/ui/validator/configuration/rules


Let me know if I could be of any help with the validation errors. 

Regards,
Joana
Progress Telerik

[Jesse]

Thank you for these very helpful links, Joana. Under the widgets are hidden after postbacks section of the troubleshooting page, it says that all elements with the input-validation-error class are hidden on validation. Can you help me understand why that is or what is hiding these elements? My understanding of that class was that it is used to highlight fields that have a validation error. 

[Joana]

Hello Jesse,

The troubleshooting section widgets are hidden after postback is valid for fired jQuery Validation. So, if you have already integrated kendo Validator, you should not encounter such issue.

jQuery Validator uses input-validation-error class on error. On validation all elements that contain this class are hidden. As this is client-side validation, once the form is submitted all validation error messages and styles are removed. The DatePicker copies the classes of the input element (which is used for initialization and validation) and it gets hidden.

Speaking of the Kendo UI Validator, it uses k-invalid to style the elements 

Regards,
Joana
Progress Telerik