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.
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
ReactJS newbie question. I'm trying to set focus to the "Emergency Service" input field after setting current location on the "Location Lookup" field but both fields live in separate components. I'm already making use of useRef in each component but trying to reference either ref from another component returns an error. Any assistance would be greatly appreciated. Please see my project at link below. I added a comment on line 208 of LocationLookup.js where I'm trying to trigger focus to the Emergency Service field. https://codesandbox.io/s/twilight-waterfall-3okx4?file=/src/index.js
Quick solution would be:
Change EmergencyService - wrap it with React.forwardRef, pass ref to Input (also see how to combine refs (for example https://github.com/gregberge/react-merge-refs)
Create ref (emergencyServiceRef) by useRef() in SearchBar and pass it to EmergencyService.
Pass prop to LocationLookup (maybe onLocationChange)
on line 208, call onLocationChange()
In SearchBar, you would handle callback onLocationChange and do "emergencyServiceRef.current.focus()
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.
I have a Ant Design 4.x.x Form element without multiple Form.Item. I need to implement some logic involving form items' values, for example disabling a field if another one's value equals something, or recalculate select options when a text input changes.
To do so, I create the form using Form.useForm() and use form.getFieldValue() in my functional component body and / or in the returned JSX, like so :
It is working as I expect to, but at startup, getFieldValue usages throw annoying
index.js:1 Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?
I found that Form functions cannot be used before rendering, and the problem also occured when displaying a form in a Modal like stated in the docs.
So I feel that I'm missing something on how to correctly add custom logic between fields, or doing some calculation involving fields values in component body.
What would be a correct approach to do this ?
Try adding getContainer={false}, to your modal this will work for you.
I'm making a react app using antd, I'm trying to add modal but it doesn't work, every time I click the trigger button I got errors saying "Uncaught Error: Element ref was specified as a string (header) but no owner was set. You may have multiple copies of React loaded.". Im following this syntax from https://ant.design/components/modal/
I found related problem https://github.com/jrm2k6/react-markdown-editor/issues/55
and according to react
https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
they dont recommend using ref attribute, instead use a callback pattern.
I dont know what to do..
Any help, thanks.