flipbyte / formik-json-schema

Easily create react forms using JSON / Javascript Object
MIT License
152 stars 40 forks source link

Example provided does not work when insert validation #67

Open guiihlopes opened 5 years ago

guiihlopes commented 5 years ago

Describe the bug

Hello!

Using the example provided and inserting any simple validation it's not working... I check it out and I have discovered that its always dispatching error when there's a nested field like attributes.title or attributes[title], when the field name is title only the validation works without any problem. It seems not validating with the current value!

To Reproduce

1: https://github.com/flipbyte/formik-json-schema#prepare-your-form-object 2: Add simple string required validation.

Expected behavior

It expected to show error only when field is empty.

image image

easeq commented 5 years ago

It seems to be working fine in the demo containers example: https://flipbyte.github.io/formik-json-schema/#containers. The only difference i could see in your schema and that of the example is the the error message "Required field". Can you try without that and see whether it's working?

guiihlopes commented 5 years ago

It seems to be working fine in the demo containers example: https://flipbyte.github.io/formik-json-schema/#containers. The only difference i could see in your schema and that of the example is the the error message "Required field". Can you try without that and see whether it's working?

@easeq It still not working as showed in next images...

image

image

If you would like to reproduce, use this schema provided with the addition of validation:

            id: "my-new-form",
            label: "My New Form",
            type: "container",
            renderer: "form",
            elements: {
                save: {
                    type: "field",
                    renderer: "button",
                    name: "save",
                    label: "Save",
                    htmlClass: "btn-success",
                    buttonType: "submit"
                },
                main: {
                    type: "container",
                    renderer: "div",
                    htmlClass: "row",
                    elements: {
                        title: {
                            name: "title",
                            label: "Title",
                            type: "field",
                            renderer: "text",
                            fieldType: "text",
                            validation: [['string'], ['required']]

                        },
                        title1: {
                            name: "attributes.0.title1",
                            label: "Title 1",
                            type: "field",
                            renderer: "text",
                            fieldType: "text",
                            validation: [['string'], ['required']]
                        },
                    }
                },
            }
        }
easeq commented 5 years ago

Which version of formik-json are you using? Also, try this:

fieldset: {
    type: 'container',
    renderer: 'fieldset',
    title: ' Simple Fieldset',
    name: 'attributes',
    elements: {
        title: {
            name: 'title',
            label: 'Title 1',
            type: 'field',
            renderer: 'text',
            fieldType: 'text',
            validation: [
                ['string'],
                ['required'],
            ]
        }
    }
},
guiihlopes commented 5 years ago

Im using the latest published in npm,"^0.4.0".

When I use a simple element name attribute like title it works normally, but the problem I said is when I try to use a nested field name like attributes.0.title1 it not works as expected with validation.