I have implemented some form validation in React Semantic UI based on some posts I found on SO - for example, the following:
required={true}
error={this.state.errors["macs"]}
My question is, where are these the React Semantic UI documentation? I haven't had any luck finding it so far.
https://react.semantic-ui.com/collections/form/ - specifically in the Form.Field prop.
Field Variations Required Field shows required in use
States Field Error Label shows the Field with the error property set to show a message with a pointer.
Form error state with Messages shows a Message that displays when the form is in an error state.
Related
I'm building a multi-step-form page with react, react-hook-form and chakra-ui.
So far i was able to apply validation to the first form section and also the error messages were changing dynamically based on the input, but when I manually trigger the error using "trigger" method from react-hook-form, the error messages won't change dynamically anymore, to update the state of the error message I have to re-click the next button.
Here, is my code example: SandBox
I hope you're all well, I'm here with this message to express a concern, a problem that I've encountered. I use autoCompletion from materiall-ui combined with formik in reactjs.
I have trouble filling the autoCompletion field in edit mode, I can't display the exact value in my form so I lose the value of my autoCompletion when I switch from one step to another.
You will have to use initialValue to set value in Autocomplete, formik + materail ui has data binding issues so you can use https://stackworx.github.io/formik-mui/ sample example here https://codesandbox.io/s/formik-material-ui-autocomplete-rishd?file=/index.js:157-169
PS: Please reload sandbox in case of any dependencies error
I am trying to get React JSON Schema to focus on the first field with an error after submit and I am not able to find any way to do so.
Any thoughts?
There is the onError prop you can use according to the docs. If an error exists, you can use the focus method such as document.getElementById("myTextField").focus() to that first element.
I'm using react,formik and material-ui to build out an application that I'm trying to add a slider to. For some reason, it appears that the Material-UI slider component is not exposing the name prop to formik which causes formik to through a warning and not use the value from the slider. The warning says that you've called handleChange but not provided id or name
I've created a CodeSandbox that shows the issue I'm having. I managed to find 1 issue on GitHub but Material UII closed it saying that they aren't fixing it and that it has to be handled in userland.
I'm wondering if anyone else has come across this and managed a workaround for it.
I figured it out. Changed the onChange prop from onChange={handleChange} to onChange={(event, value) => setFieldValue('slider', value)}
As for now, it already provides a name attribute.
https://mui.com/material-ui/api/slide/#props
What is the simplest way to force a formik form to show fields in error?
I would like to this for a react storybook to show what our form looks like when a field has an error in it.
Each field in my form will only display an error if it has been touched and its value is not valid.
I can set the initial value of the fields but I can't figure out how to mark then all as touched so that the errors are displayed.
The Formik test for ErrorMessage might be of some use.
Note the use of setFieldError and setError
I managed this by setting initialErrors and initialTouched for the fields I wanted to display the error state for, in addition to setting initialValues.
In the Formik docs:
https://formik.org/docs/api/formik#initialerrors-formikerrorsvalues
https://formik.org/docs/api/formik#initialtouched-formiktouchedvalues
eg.
<Formik initialValues={} initialErrors={} initialTouched={}>...</Formik>
This worked in stories using both a decorator Formik component wrapper as well as the storybook-formik addon.