0

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()
7
  • "form is currently being submitted (prior to HTML5 Validation)" - submits prior to validation feels like a design challenge perhaps? Commented Jul 7, 2022 at 16:08
  • Just very poor wording, I will correct that. Commented Jul 7, 2022 at 16:10
  • Rephrased, thank you for noticing! Commented Jul 7, 2022 at 16:11
  • Fully replicating the HTML validation functionality inside the JS validation lifecycle would also be an acceptable solution for me Commented Jul 7, 2022 at 16:21
  • 1
    @MarkSchultheiss Very interesting! The answers are not exactly applicable (as they assert validity, but do not access errors), but they pointed me in the direction of not relying on RJSF, and finding out more about native HTML5 validation (which probably is the only way to solve this anyway). I found out I can query all invalid form element simply like this: form.querySelectorAll(":invalid"), This really seems to be sufficient. Thank you for this! :) Commented Jul 7, 2022 at 17:33

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.