Comments (7)
checkbox{
type: ‘boolean’,
default: null,
enum: [null, true],
}
from react-jsonschema-form.
I tested the following schema:
const schema = {
"type": "object",
"title": "Testform",
"properties": {
"title": {
"type": "string",
"title": "Title",
"default": ""
},
"flags.pure": {
"type": "boolean",
"title": "Only typed as boolean",
},
"flags.withDefault": {
"type": "boolean",
"title": "Typed as boolean and with default: false",
"default": false
},
"flags.withEnum": {
"type": "boolean",
"title": "Typed as boolean and with enum: [false, true]",
"enum": [true, false]
},
"flags.withEnumAndDefault": {
"type": "boolean",
"title": "Typed as boolean and with enum: [false, true] and default: false",
"default": false,
"enum": [true, false]
}
},
"description": "Testform's description.",
"required": [
"flags.pure",
"flags.withDefault",
]
};
The results are:
- "
empty
" default values are ignored (this does apply forboolean false
,string ""
and probalby [untested]number 0
). - The work-around using
{ "enum": [ true, false ] }
and not setting the field torequired
does work.
In my opinion, a required boolean checkbox should not fail the validation if it is set to false
. If I wan't the form to fail validation in this case, I should limit the allowed value for this field using the enum
operator.
I understand the argument that "no user action" does not equals "setting a value to false
". If you want to follow this argument I think the following three cases should pass validation (but don't do at the moment):
- The checkbox has no default, the user first checks it and then decides to un-check it before submitting the form.
- The checkbox has the default value of
false
and the user doesn't change the value. - The checkbox has the default value of
true
and the user decides to un-check the box (e.g. opt-out for a newsletter).
from react-jsonschema-form.
Didn't test but does setting an explicit default value solve the issue?
{
type: "boolean",
default: false
}
Actually it makes sense to me for validation to fail if no default value as been set and no action has been performed by the user just yet.
from react-jsonschema-form.
I had a similar feeling and I was wondering if it wasn't to address cases when you actually want the checkbox to be checked (I have read theTOS for instance)
from react-jsonschema-form.
@n1k0 As I understand this, but please correct me if I'm wrong, your change now reads default values from the schema if they exist, is that correct? That means that a boolean
field will be rendered as a checkbox
by default, and unless the schema sets a default value of false
, the checkbox
must be checked. Is that correct?
Checkboxes are tricky. I can see the logic in this approach. I can also see @HelloLudger's point that it instinctively feels unintuitive. I'm also not sure what a more elegant solution looks like. The humble <input type="checkbox"
does not provide a means to distinguish between unset and false
.
Maybe this should be explained a little in the docs? Something like this?
Boolean gotchas
By default, a
boolean
field will be rendered using thecheckbox
widget. If the field is submitted unchecked, it's value will beundefined
. If the schema includes this field inrequired
, then the submission will fail because the field is neithertrue
norfalse
. This can be useful for compulsorytrue
fields like "Agree to terms" checkboxes and so on. If you want the unchecked checkbox value to befalse
, you can specifydefault: false
in the schema for that field.
Having just written that, I wonder if this is the most intuitive approach. I suppose it would be a breaking change to modify this behaviour, but somehow I have the sense that out of the box, an unchecked checkbox
should set the value false
if empty, and true
if checked. Then if somebody wants to require a value of true
, they can (presumably, maybe?) specify that in the schema.
I also suppose, that currently, there is no way to have a boolean field which can be either true
, false
or empty. Either the select
or the radio
widgets will only render true
or false
as options, and the select
will automatically default the first option, and the radio
doesn't provide a way to "unselect" an option in most browsers.
from react-jsonschema-form.
PS> Of course much of this is now solvable with custom field types, as per #77...
from react-jsonschema-form.
checkbox{ type: ‘boolean’, default: null, enum: [null, true], }
You are a genius!!
from react-jsonschema-form.
Related Issues (20)
- DOCUMENTATION Issue: Wrong method signature? HOT 1
- Schema defines standalone checkbox as mandatory, but asterisk is not rendered. HOT 2
- I would like to make a default change to the look of all input fields HOT 5
- Adding required field in nested if/then/else not working correctly HOT 2
- FormData is not received based on schema properties HOT 1
- Select bug when multiple oneOf are nested HOT 2
- How can I cite this? HOT 6
- RJSF anyOf customization HOT 3
- Validation error when multiple $ref references point to a single definition HOT 3
- not working about validation HOT 3
- Passing ui options down to array items HOT 3
- MUI number input label UI issue with non-numeric input HOT 1
- Publish v6 release candidate with support for Bootstrap 5 HOT 1
- Can not replace "integer" widget HOT 4
- Omit Extra Data not behaving as expected on submit for allOf (if then) schemas along with additionalProperties set to false blocking form submission HOT 1
- `anyOf` form validation error messages confusing when `anyOf` items contain properties found in other items HOT 4
- How to reference an array field from an enum field?
- Array Length dependant on FormContext Value
- Add support for tremor UI library
- Issue with data of files array when we have validation required and minItems HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-jsonschema-form.