I like to re-trigger validations after the form has mounted. Let's assume I like to run the validations each time I click a button named 'validate inputs'.
How to do this?
Related questions:
How to run validation on a slice of a redux-form FieldArray state
Is there a way in Redux Forms to make a form validate from code?
Manual redux-form validation is an oft requested feature, that does not seem to be provided at the moment.
My personal workaround is to trigger this.props.change('_validationHack', Date.now()) in the reduxForm-wrapped component and then remove values._validationHack in the onSubmit method before sending the values to the server.
It's not pretty, but seems to work without exception.
According to 28/11/2018:
https://redux-form.com/6.2.1/docs/api/actioncreators.md/
There are actions that you can dispatch for making changes to your form and triggering the validation method.
If you trigger change/touch actions it should execute the validate function.
This worked for me:
import { touch, stopAsyncValidation } from 'redux-form';
//...
yield put(stopAsyncValidation('CallForm', { mdn: mdn.error_message }));
yield put(touch('CallForm', 'mdn'));
clue from https://stackoverflow.com/a/51065315/588759
clue about touch https://github.com/redux-form/redux-form/issues/3992#issuecomment-399411329
working example https://github.com/zobroj/ab-web/blob/ea4fccb68b4f3a2f747f47d23624bc69631782ed/app/containers/RegisterPage/sagas.js#L62
found with https://github.com/search?l=JavaScript&q=%22yield+put%28touch%28%22&type=Code
The sync validation is run on every render, so "triggering it" doesn't really have much meaning.
If you would like to use async validation, there is a this.props.asyncValidate() function that you can call to trigger it.
OR, if you prefer submit validation, you could just submit the form.
Related
Formik doc says
https://jaredpalmer.com/formik/docs/guides/form-submission
To submit a form in Formik, you need to somehow fire off the provided
handleSubmit(e) or submitForm prop. When you call either of these
methods, Formik will execute the following (pseudo code) each time:
----
Run all field-level validations, validate, and validationSchema asynchronously and deeply merge results
---
I cannot understand the form submission process. What is the difference between handleSubmit, onSubmit, submitForm.
Does validations always run asynchronously even if I provide a synchronous validate function?
Which of the above three function run asynchronously?
What do they return?
onSubmit - it's native event prop of form component. It's do not have relation to your question
I haven't use Formik. But if we take a look on their code: https://github.com/jaredpalmer/formik/blob/26c4f8627a5ecfd81ec2196c7a9687b3f39f2836/packages/formik/src/Formik.tsx#L740
submitForm - more low level function, that return Promise, and you could work with result afterwards.
handleSubmit - inside invoke submitForm, and handle all error if occurs inside, return nothing. (https://github.com/jaredpalmer/formik/blob/26c4f8627a5ecfd81ec2196c7a9687b3f39f2836/packages/formik/src/Formik.tsx#L833)
Both of this function is async, because they wrapped with useEventCallback.
By default validation always will come after you trigger any of the events submitForm or handleSubmit. What type of validation sync or async you could write by yourself depend on this first validate example (https://github.com/jaredpalmer/formik/blob/26c4f8627a5ecfd81ec2196c7a9687b3f39f2836/docs/guides/validation.md#validate)
There is list of methods when validation is run, or how you could trigger it:
https://github.com/jaredpalmer/formik/blob/26c4f8627a5ecfd81ec2196c7a9687b3f39f2836/docs/guides/validation.md#validate
https://github.com/jaredpalmer/formik/issues/1027
"HandleSubmit can be passed as is to a form's onSubmit event and preventDefault. submitForm cannot."
I am very new to redux and redux-observable so I would like to ask for some advice.
I am using redux-observable with rxjs to handle all my side effects which works very well.
I am using redux-form to handle form input and form validation that works also very well.
My problem is to integrate them together. My understanding is that redux-observable runs parallel to my ordinary actions creators so the action I invoke when I submit the form will always return without an error and my parallel running observable will yield a different action down the line if there was any issue with the submittion so I am not sure how I could handle it properly.
I found the following library. https://github.com/salsita/redux-form-actions
that looks like using a HOC to wrap the action with a promise. I am just wondering if that is the right way to go about it and how it works.
Can someone from the redux-form community check it out and let me know if it looks good. I do not have enough knowledge to make a call at this point as I wrote my first form today and I do not with to go down the wrong path.
Also an explanation how this works would be gratelly appreciated too / if there is a better approach.
I appreciate any comment or notes!
Thanks a lot !
The gist is, within onSubmit, pass a Promise's resolve/reject functions to a dispatched action. await on that promise. then, in your epic, call resolve/reject as needed to resume onSubmit's flow.
here's my PR explaining how it works, with a runnable example: https://github.com/redux-observable/redux-observable/pull/490
this question is about where to put validation of an form element in redux. I feeeeel as though I should have an onValueChange event that dispatches an action to the reducer that validates and updates both the value ( invalid or valid as it may be ) as well as the "isValid" property on state so that that element can then display an error.
Conversely, I could do the validation in the action, and if it fails just dispatch a failure action instead.
One note is that i do prefer the anonymous function nomenclature to extending the react.component.
I guess I should change then name of this to where is the proper place to put validation in the redux flow.
Keep the validation in your component. I hear a lot of "keep all state in redux", but I try to only keep what I absolutely need in redux. Use component state with a error property and if your validation fails set the state on the error property. As well, redux forms: http://redux-form.com/4.2.0/#/?_k=mhjui4 is a good library for simple and complex forms.
I'm writing a restful redux/react app.
My desired output is such.
INPUT_CHANGE-->
(state = {valid: false})->REDUCER->(state = {valid: true})-->
AJAX CALL
From the redux documentation, async javacript is supposed to be called from the action creator, but I don't understand how to get to the action creator once the state changes from valid:false to valid:true.
Since this is a react app, I could change a hidden input called valid, which has an onChange action creator attached to it, but this seems like an unneccessary extra step. Any ideas?
My general preference is to have the action creators handle all async operations. So the validation operation in this question is comparable to the shouldFetchPosts function in http://rackt.org/redux/docs/advanced/AsyncActions.html
The action creator would then be something like inputChangeAndSubmitIfValid which corresponds to that file's fetchIfNeeded action creator.
On very rare occasions I implement an observer for catching store changes, but I always try to find a better action oriented way first.
I would like to validate both single field and multiple field data from a CakePHP form.
The single field validation should be done on blur from each field while the multiple field validation should be done on submitting the form.
I would like to use the $validate property declared in the Model for validating data and I would like to display the errors near each field (single field validation) and on top of the form (for multiple field validation).
My main goal is to achieve this the most "caky" way (if there is one for validating data with jQuery). I couldn't find any useful advice out there and I'm asking you for some help to get this going.
One of my concerns is how shall I pass data from the form to jQuery and then to the action that does the validation and also how shall I return and display the errors, if there are any.
Thank you in advance!
I'd suggest first making sure everything works without jQuery, then use the jQuery Form plugin to submit your forms via AJAX. If you include the RequestHandler component in your AppController, you should find that your controllers distinguish automatically between AJAX and synchronous requests.
OK, so I coded my own solution to this, but I am still waiting for a more "caky" approach.
I made two generic jQuery functions, one for single field validation and one for multiple field validation. The function should grab the data from the specified form and send it to the form's action via AJAX, to a specially created controller method which will attempt to validate data and output an AJAX response ("" for validation has passed and errors for errors in validation). Then, the result is checked in the jQuery function and the default form behaviour is triggered only if the validation has passed. Otherwise, display the errors and return false; to prevent default submission.