Any Way to Programatically Invoke Form Validation

2 posts, 0 answers
  1. Kyle
    Kyle avatar
    39 posts
    Member since:
    Aug 2011

    Posted 05 Jan Link to this post

    After two days of trying to get the Form component to work for my needs, I've hit a pretty major roadblock for our product.

    Use Case: Admin creates a template with dynamic fields. End user consumes the template, but has multiple instances of it in a single page. End user shouldn't need to go thru each instance of the template. They should be able to click "Submit" and all template instances are validated. First invalid instance is displayed.

    In Kendo UI, this was easy.  You iterate all the <form> elements and run .validate() on it.

    var forms = $("form").submit(function (e) {
        e.preventDefault();
    }).kendoValidator();
     
    $(".btn-primary").click(function () {
        var firstInvalidForm = null;
        tabPaneForms.each(function () {
            // Iterate all the tabs and validate the input
            var that = $(this);
            if (!that.data("kendoValidator").validate() && !firstInvalidForm) {
                firstInvalidForm = that;
            }
        });
     
        if (firstInvalidForm) {
            // Find the first invalid field and display the tab
        } else {
            // Serialize all the data
            var form = $("#frmData");
            serializeFormData(form);
     
            // POST the data
            form.submit();
        }
    });

     

    Now, I realize KendoReact is NOT Kendo UI, and that React is a totally different thought process than good ol' jQuery. However, I need something similar.

    The problem I keep running into is that everything that I need is in FormRenderProps. Your Form control expects you to hit a Submit button inside of the Form's render function. Originally, I didn't want this, but I was able to wrap my entire UX in the form to make it work (not too pleased that I had to, though). So when the Submit button is clicked, it uses formRenderProps.onSubmit, which does some blackbox magic and raises the Form's onSubmitClick/onSubmit events. Things were going fine until I realized I can't do this purely linearly.

    I've forked your Multi-Step Form example and quickly tweaked it to be similar to my team's needs. We're using a Stepper to mimic the tabs that we use (though the actual UX control we use is more similar to your TabStrip): https://stackblitz.com/edit/react-vqk7ya?file=app/data.jsx

    The idea is that the end user should be able to either click "Submit" and have the validation code run for each Stepper step/TabStripTab or they can jump around as they wish by clicking the actual Stepper step/TabStripTab. For our needs, validation only needs to occur on Submit (but each step must be validated on Submit click).

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 06 Jan Link to this post

    Hello, Kyle,

    Thank you for all of the details.

    We discussed this internally and agreed that this will be a nice feature of the Form.

    I have logged it in GitHub and the status can be monitored there:

    https://github.com/telerik/kendo-react/issues/820

    Please have in mind that the ETA will be based on the interest in the feature, its complexity, and the priority of other important tasks.

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top