Force Validate on Step

Hi, so I'm setting up an Add form using Steps and I've put required validators on the fields of the first step, however the validators don't fire when I go to step 2. How can I force the validators to fire before allowing the user to go to the second step?

1 Like

Hi @kgordon,

It turned out that this isn't possible at the moment due to lack of integration between the steps and the form. We will investigate what could be done about it as this a scenario we would like to support. I will update this thread once there is progress.

1 Like

Ok thanks! I'll keep an eye open for a solution.

I'm curious about this too. Is there a timeline of when we can expect this functionality?

Hi @dajones,

This has been implemented a few months back. The Steps component will trigger validation if placed inside a RadzenTemplateForm.

1 Like

Actually let me change my question. I have actions that take place on the change event of the step. I want to prevent these actions from taking place if the step fails validation. How would I do that? Is there a value that is set indicating validation failed that I can access?

The Change even will not fire if validation fails. Here is the actual implementation.

internal async System.Threading.Tasks.Task SelectStep(RadzenStepsItem step, bool raiseChange = false)
    {
        var valid = true;

        if (EditContext != null)
        {
            valid = EditContext.Validate();
        }

        var newIndex = steps.IndexOf(step);

        if (valid || newIndex < SelectedIndex)
        {
            SelectedIndex = newIndex;

            if (raiseChange)
            {
                await Change.InvokeAsync(SelectedIndex);
                await SelectedIndexChanged.InvokeAsync(SelectedIndex);
                StateHasChanged();
            }
        }
    }

Yeah unfortunately I seem to have found a way around your code :grinning:

It's very likely because I've just now added a template form and put the steps inside the form. However the change event on steps does fire even though the validation fails.

Here's the change event and the debugger showing the code firing

You can see all the validators fired on the form here:

I'm assuming I've done something wrong trying to put the steps control inside the template form. Do I need to enter something in either Action or Method for it to prevent the change event from firing, I've attached a picture of my current design.

We may have reproduced the issue. Although the step does not change the Change event seems to fire sometimes. We are investigating what is causing this problem.

1 Like

This fix should be included in the latest Radzen release.

2 Likes

Working well, thanks so much!

I have tried it and it is working if the form is around the RadzenSteps component. However, what I am trying to have is to validate each step on its own, i.e. a separate form per step which is validated on clicking on next. And navigating to the next step can be done only when the form is valid. Is this possible?

You’re right it works if the step is inside a form. That’s how it’s supposed to be. Why would you gave multiple forms on one page? I would strongly suggest you rethink your approach.

But if it is one form, I can not move to the next steps since the form will not be valid as it is missing some required inputs, which are shown in the next steps. You understand what I mean?

Having a separate form per step isn't supported out of the box. You can try experimenting with @bind-SelectedIndex and setting the selected index appropriately:

<RadzenSteps @bind-SelectedIndex=@selectedIndex>
</RadzenSteps>

And before you ask - we don't have an example that does what you need.

I think I’ve understood you. Create your form. Add the steps component inside the template form tags and the move the controls onto the various steps as required. Literally you can cut the control, change the step page and paste. Voila!

I am sorry. I did understand what you mean here. Can you maybe make a small example? Thanks :slight_smile:

I have a similar issue. A complex form that has some validations go across data collected in different steps. It would be great to be able to disable the integration between steps and form (override the edit context in the steps control ?). Otherwise you have to make a choice between using the steps control or using a form. Arguably, the content of a form should be allowed to be invalid (and the content of the form should allow editing while invalid). Only the submit button requires a valid form. Forms that don't allow full editing of invalid data become an issue.