Validating dynamically inserted content

4 posts, 0 answers
  1. Jesse
    Jesse avatar
    54 posts
    Member since:
    Aug 2013

    Posted 31 Aug 2018 Link to this post

    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);
  2. Joana
    Admin
    Joana avatar
    210 posts

    Posted 04 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Jesse
    Jesse avatar
    54 posts
    Member since:
    Aug 2013

    Posted 04 Sep 2018 in reply to Joana Link to this post

    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. 
  4. Joana
    Admin
    Joana avatar
    210 posts

    Posted 05 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top