I am working with a form which has html5 Validation enabled. By this point, I doubt anyone knows what could break if it weren't, so I would rather not disable it.
I need to react to HTML5 validation errors occuring (expand an accordion item that contains the field which fails to validate), but I don't know how.
I tried accessing errors via validate and transformErrors callbacks:
return (
<Form
validate={(data, errors) => { console.log(data, errors); return true }}
transformErrors={(errors) => { console.log(errors); return errors }}
// ...
/>
)
but neither function seems to trigger when HTML5 validation stops me - they only log into the console once HTML validation passes. Is it possible to somehow intercept the HTML5 validation error?
If the above is not possible, this would suffice for me:
Whenever a HTML5 validation fails on a field that is collapsed inside an accordion, this error leaks into the console:
An invalid form control with name='' is not focusable.
<input class="form-control" id="root_triggers_0_dialog" label="Dialog to trigger"
required="" placeholder="" type="text" value="">
If I could catch this error - both the message (to identify the error type) and a reference to the element that failed to focus (to indentify which accordion item to expand) - I could do what I need.
I tried putting catch blocks all over my code, but weren't able to catch the error anywhere. The current method of triggering the form submit attempt, is via a programatic .click() on a button inside the RJSF form:
return (
<Form
formData={formData}
// ...
>
<button className="hidden" ref={submitRef} />
</Form>
)
// somewhere up the component tree
submitRef?.click()
form.querySelectorAll(":invalid"), This really seems to be sufficient. Thank you for this! :)