React-jsonschema-form: Empty string passing custom validation for required fields, but doesn't pass browser validation

Created on 22 Jul 2016  路  5Comments  路  Source: rjsf-team/react-jsonschema-form

Steps to reproduce:

  1. Go to the Simple form on the playground
  2. Change formData to be an empty object
  3. Type something in the "First name" field
  4. Clear the "First name" field
  5. Attempt to submit the form

I get a browser warning (I'm using Chrome) that says "Please fill out this field", even though the firstname field doesn't show up in the list of errors.

I'm assuming that the form passes this library's validation because it's trying to distinguish between formData = {} and formData = {"firstname": ""} but I consider that behavior to be unintuitive. And it's especially weird considering the browser says the field is invalid.

Most helpful comment

Well according to JSON schema, it is. And it technically makes sense; even empty, a string is still a string. Specifying a minLength constraint or accepting composite types like [null, "string"] seems to be the way people usually deal with that... Dunno what to do here, I'm reluctant diverging on what the specs say...

All 5 comments

Hello mplis-jetsetter,
you can take out the browser warning using noValidate to true on the 'Form' element as explained here https://github.com/mozilla-services/react-jsonschema-form/blob/master/README.md#live-validation
The real issue here is, even if we say a field is required, and we do not enter any value, and do a submit, the error message does not show up.
I think this is a bug.

Yeah I think the main issue is that an empty string seems to be considered a valid value for a required string field, which I think is almost never what we want.

Well according to JSON schema, it is. And it technically makes sense; even empty, a string is still a string. Specifying a minLength constraint or accepting composite types like [null, "string"] seems to be the way people usually deal with that... Dunno what to do here, I'm reluctant diverging on what the specs say...

An empty string is valid for a JSON Schema of type string, if the default HTML5 validation is causing issues, you can specify the minLength keyword or set the noHtml5Validate prop to true (see https://react-jsonschema-form.readthedocs.io/en/latest/validation/#html5-validation).

I think it would be great to make a note of this in the documentation front and center, it makes sense according to the spec but its non-intuitive for someone who is not deeply versed in the json-schema spec for string.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MedinaGitHub picture MedinaGitHub  路  3Comments

Eric24 picture Eric24  路  3Comments

FBurner picture FBurner  路  3Comments

n1k0 picture n1k0  路  3Comments

mammad2c picture mammad2c  路  3Comments