React-final-form | Form field validation with external field dependencies - reactjs

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.

Related

IF I have use antd4 Form Component,should I use Formik?

as the title ,Formmik and antd Form all do the same thing :
1 validation
2 data-binding
3 error messages
formik https://jaredpalmer.com/formik/docs/overview
antd Form https://ant.design/components/form-cn/
do they have the same functions?
Both Formik & Antd Form provides similar functionality to manage form validation & error handle, form state variables, etc.
If you would like to use AntDesign Component UI for your project, I recommend to use Antd Form itself for your form (state, validation, error handle, etc). You don't need Formik when you use Antd.
If you would like to use other UI Libraries like Material-ui, semantic-ui, etc or to use your own customized UI, you should use Formik.

How to access Kendo Datepicker's raw value in Angular?

I am trying to write a custom Angular validator for Kendo-UI datepicker component. I have written the validation function and hooked it up to the kendo-datepicker HTML component.
The issue is that if any fields are missing, the FormControl passed to the validator will have null as its value. If MM/dd/yyyy are all there, it has the actual date object.
I would like my validator to error out if one or two MM/dd/yyyy components are missing, but not all three (ie when the user has cleared/not touched the component).

Ant Design: Why are customized form components automatically validated as successful?

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.

Redux-form validation of several tabs

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.

How do display angularjs validation feedback in a div

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

Resources