Any Way to Programatically Invoke Form Validation

[Kyle]

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).

[Stefan]

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