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."
Related
I have added errors manually to my input using the link in here Here and the example in Here but when I try $("#myshowErrors").valid() after I added the errors it becomes true?
here is my code
var validator = $( "#myshowErrors" ).validate();
validator.showErrors({
"firstname": "I know that your firstname is Pete, Pete!"
});
I am not able to make the client validation fail. How can I make form.valid() to return false?
I don't want to make form.valid()=false; manually I want that to be taken care of by just setting the errors.
It's entirely unclear by the lack of code in your question, but I think you might misunderstand where to attach the .valid() method.
This method only gets attached to a selector representing a single <form> element...
$('#myform').valid(); // triggers validation on the entire form
Or to any selector that represents a single form input element...
$('#myform input[name="myinput"]').valid(); // triggers validation on one input element
When .valid() is called, validation is triggered on the selected element, error message(s) is/are displayed, and the method will return true or false.
The .valid() method can never be attached to a selector that represents more than one element, or a collection of elements without also using a jQuery .each().
EDITS:
showErrors is just for showing existing errors. You cannot "invalidate" a field by calling showErrors. Fields are either valid or invalid based solely on what is contained within that field.
You've tagged the question with Unobtrusive Validation. Since jQuery Validation is handled automatically via the Unobtrusive Validation plugin, you are not allowed to call your own instance of the .validate() method. That's because the Unobtrusive plugin automatically constructs and calls .validate(). Once it's called, the plugin is initialized, it cannot be called again, and all subsequent calls are always ignored.
I have a scenario where I have to validate whether one of the input fields have values entered.
In the OnBlur Event of each input field I get the value and set in the state, and in the mean time I check whether there is values in one of those input boxes and set the inputIsReq state. And I use that inputIsReq in the required attribute in each text field. After this change my page loads really slow, and the validations doesn't happen too. Any idea to fix this ?
Your code is running slow because you are calling the method changeInputValue instead of passing it as a callback.
this will call changeInputValue:
wrong:
onBlur={this.changeInputValue("input_4_value", this)}
correct:
onBlur={() => this.changeInputValue("input_4_value", this)}
Abowe example will pass changeInputValue as a callback.
you can also
onBlur={changeInputValue} but then you can't pass any params to callback
You were calling changeInputValue in a loop since it have changed the state and then component was re rendered and so on... This was also producing the warning in a console
warning.js:36 Warning: setState(...): Cannot update during an existing
state transition (such as within render or another component's
constructor). Render methods should be a pure function of props and
state; constructor side-effects are an anti-pattern, but can be moved
to componentWillMount.
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.
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 am using custom validation directive to validate a field in a form and the validation process includes a AJAX call to verify user information with server API. We want to validate the field as long as user stops typing for a certain period of time.
I have two questions:
1.Why is the function below not working?(with link function in the custom directive) The log message was never shown no matter how many times I type in the binded input field (I am pretty sure I enabled log message display since other logs were shown correrctly)
scope.$watch(attrs.ngModel, function() {
$log.debug("Changed to " + scope.$eval(attrs.ngModel));
});
2.What is the best way to detect that the user has stopped typing for the program to execute the validation process? And is it possible to cancel the validation process before it is finished if user starts to type again?
attrs.ngModel will equal the string value in the html context. What you want to do is bind the ngModel value to the directive's scope:
scope: {
model: '=ngModel'
}
Then watch the directives scope:
scope.$watch("model", function() {
console.log("Changed");
});
example: http://jsfiddle.net/BtrZH/5/