React-jsonschema-form: Opt-out of HTML5 Required Validation, then add Required Error

[spallister]

Prerequisites

• [x] I have read the documentation.
  

  Description

For required fields that are not specified, it would be nice to add a "[Title] is required." error to the list of field errors upon validating, as opposed to the existing behavior wherein an HTML5 required attribute is added to the field.

Steps to Reproduce

1. Go to the RJSF playground, and load the Simple example.
2. Delete "Chuck" from the 'First name' field.
3. Click the 'Submit' button.
   

   Expected behavior

Observe that RJSF has added a 'First name is required' error message below the field, and within the Errors summary displayed at top.

Actual behavior

Observe the HTML5 required field message displayed for the field, with browser-specific styling (i.e. related to https://github.com/mozilla-services/react-jsonschema-form/issues/159). More critically, it seems support for the required attribute is still absent from Safari - so if you go through the above 'Steps to Reproduce' on your iPhone using Safari, for example, nothing happens, and it's not clear why.

Version

Version used on the playground.

Willing to Help

I'm definitely keen to help out with trying to make this happen, but wanted to check with the core contributors if there was a specific reason why things are implemented the way they are, and any tips they might have for resolving this issue (Note: I understand it makes sense to leverage HTML5 technologies where possible, but in this case, required field functionality is currently "broken" in Safari).

Thanks for the great library!

[n1k0]

Yeah, we need to drop our use of HTML5 validation attributes, they make the UX inconsistent and their implementation is far too inconsistent across platforms as well.

See #159, #326 and possibly others.

Thanks for the great library!

Thanks, always appreciated :)

PS: Patches are welcome :smiley_cat:

[spallister]

Thanks for the reply. I'll dig through the library in more detail, and try to make this happen!

[ignaciopicun]

Do we have any update on this issue?

[n1k0]

No, do you want to work on this?

[jbalboni]

@n1k0 I made a couple changes in a fork of this library that would address this. Those changes are:

• Add an option on the form component that sets novalidate on the html form element.
• Transform the list of errors sent back from JSON Schema to move the required error from the object level to the field level (i.e. add the field name to the end of property path).

I can make one or both of those changes into a PR if that seem like appropriate changes. The second one could be left to users to implement once my transformErrors PR is merged instead.

[n1k0]

Add an option on the form component that sets novalidate on the html form element.

I'm definitely interested in this, please send a PR :)

[n1k0]

448 has landed.