I've noticed that customized form components are automatically rendered with the has-success attribute. Why is this? Is there a way to fix this?
By default, errors are not shown and when a user submits the form, validation happens. But if you want has-error classes in all fields with invalid data, simply call this.props.form.validateFields() in componentDidMount method which will run validation and will add css classes to fields according to rules.
Related
I am working for a software house, on our the first large scale React project. We are using React 17, everything is a function.
We have a form that comprises of a few hundred input fields. We are rendering this form using Material UI's TextField, KeyboardDatePicker, and Autocomplete components. This form handles presentation of XML messages that are exchanged between end points. There are 20 of these XML messages and many fields (and collections of fields) are common. For example, there is a field called MessageID that appears in all XML messages, and a field group called "Header" that comprises of a few fields like MessageID . MessageDateTime, MessageSender, etc.
So the first thing we did was to create UI components that encapsulate the presentation of these common components so that we can reuse then in all 20 messages. Also, we use custom hooks to do the validation, on the component site. This is to aid re-usability. Having the validation on the form level would mean that the component can't know how to validate itself.
So what we want to do is to trigger validation on the form level, delegate validation to all children, and if all goes well, submit the form.
The question is whether this is the "right" way to do it in react. And is this a react way of thinking? And if it is indeed an acceptable react pattern, what is the best way to do this?
We are asking since extensive google search on "trigger child validation react forms" doesn't bring back any meaningful results, in what I personally believe is a basic framework need, ie delegate validation to components and await for the results. Only react-hook-form offers something similar here https://react-hook-form.com/api/useform/trigger
I have a problem on my current MVC (DotNet) application.
My form is render with classic MVC and inside it another "form" with react-final-form.
I need to validate a field in my react form base on a field rendered in the MVC form (so outside react-final-form). When the MVC field change, i would like to trigger the validate function in the react form.
Here is a codesandbox with the problem : https://codesandbox.io/s/validation-with-external-dependencies-g67d8
To reproduce, just check the Required checkbox and submit. Normally, this should fail. But as the validation is not triggered after the checkbox change, the react form is not aware of this change.
Thanks in advance for your help.
I'm trying to test a component which should show a login and subscribe button when a user is not authenticated, but should show a logout button when a user is authenticated.
How should I refer to these buttons when making the test?
All examples I found is people doing things like:
expect(wrapper.find(Button).lenght).toBe(1); // or whatever
But this obviously doesn't fit my case, since I always have at least one button and they are all the same, except for its text and action.
So I think I need some way to refer to these buttons, so I could pass an authenticated prop and check if exactly the logout button is rendered.
What would be the best approach on doing that?
The options for selecting elements can be seen in the documentation for Selector.
In this case, you'd probably want to add css classes and use the class syntax, or perhaps the attribute syntax if your buttons use input elements where the text is set as an attribute.
You need to determine what differentiates each button. First, find the button:
const button = wrapper.find(Button)
Then expect() on some characteristic of the button. For example,
expect(button.props().children).toEqual('Subscribe')
or
expect(button.props().children).toEqual('Logout')
Just use filter:
wrraper.find(Button).filter({className:'any'})
wrraper.find(Button).filter({label:'any'})
...etc
I have several tabs with redux-form fields. Of course, I have a validator, that have to validate just active tab. But there's a little problem. When I change active tab, validator checks fields value just if I try to do anything (click on any fields for example).
The question is How can I pass formProps to validator when I change active tab?
A have a similar app working fine here.
I followed "Wizard Form" strategy (http://redux-form.com/6.3.1/examples/wizard/), using 1 form per tab, all using the same form name.
Make sure you render just the body/form of the active tab, and don't submit when changing tabs.
I am new to angularjs.
It seems out of the box angularjs shows validation feedback in bubbles in realtime.
I've managed to find a way to show the errors on defocus.
Is there a way, however, to only present the feedback on a div at the top of my form instead of in bubbles?
The bubbles you see are HTML5 standard bubbles.
To valid entirely your form yourself, you'll have add a novalidate property on your form and handle the form validation through an ng-submit form custom function.
More info : http://docs.angularjs.org/api/ng/directive/ngSubmit
and http://docs.angularjs.org/guide/forms for custom form validation