Put it all together with the ErrorBlock
While we now know how to put forms together with the Tenon-UI components, we still need to put the cherry on the cake for validating complex forms.
The ErrorBlock component
The ErrorBlock component can consume the formControls object that is injected into the render function by the Form component:
It also accepts a headingText prop that will be shown as the heading of the block.
This will render a block of with a list of errors. Each error will be rendered as a functional link with a hash href to the form element that is in error. All of this is managed and handled for you by Tenon-UI.
By default the internal heading is rendered as an <h2> unless it is used inside the Heading.LevelBoundary component. You are also able to override this by using the headingLevel prop:
In this case it would render an <h3>.
Let's now put everything together to make a fully functional validated form.
A fully validated form example
The following code will provide you with a fully accessible validator form example.
If you want to see a working version please visit the Tenon-UI full Form demo.
You may have noticed one more thing you will need to do by hand. And that is set focus to the ErrorBlock when the user activates the submit button and there are validation errors.
First we need to create a React Ref.
Then we attach it to the ErrorBlock component:
We can then use the onRawSubmit handler of the Form to set focus on error as this handler is always called, not just when the form input is valid.
The validity flag is the second parameter and we can then use that to determine whether or not to set focus.
Unfortunately we need to use a setTimeout, as we need to be sure the ErrorBlock has been applied to the DOM before setting focus.
This is all the extra work you need to do as the Form component cannot handle this for you.