Comments (1)
I am having a form for signing, having as state
this.state = { email: '', fullName: '', }
I am using the
ValidatorForm
alongside theValidatorComponent
. And it is working successfully.But I would like to clean my fields values on success submit, the idea was naturally to clean state value as follow:
handleSubmit = () => { ...call the backend setState({ email: '', fullName: '', }) };
This is retriggering the validation process, causing the
required field message
to reappear.I have got the idea of using
ValidationForm.resetValidations();
to reset all validationAnd now my
handleSubmit()
methods looks like this:import { ValidatorForm } from 'react-form-validator-core'; ... handleSubmit = () => { ...call the backend ValidationForm.resetValidations(); setState({ email: '', fullName: '', }) };
But I am getting this error:
Possible Unhandled Promise Rejection: TypeError: react_form_validator_core__WEBPACK_IMPORTED_MODULE_3__.ValidatorForm.resetValidations is not a function at Object.Contact.handleSubmit [as onSubmit] (Contact.jsx:93) at ValidatorForm.js:83 at index.js:53 at run (setImmediate.js:40) at runIfPresent (setImmediate.js:69) at onGlobalMessage (setImmediate.js:109)
I solved the issue by creating a reference for the form validator as follow:
🚨 This solution can help other devs facing this problem
In my component constructor
this.form = createRef();
My form
...
<ValidatorForm
ref={this.form}
autoComplete="off"
noValidate
onSubmit={this.handleSubmit}
>
This will allow me to access the resetValidations() anywhere in my class as follow:
this.form.current.resetValidations();
from react-form-validator-core.
Related Issues (20)
- Is there a way to avoid propagation when having nested forms? HOT 1
- Validation for checkbox HOT 2
- Uncaught TypeError: _this.props.validatorListener is not a function HOT 1
- Why does it that isFormValid delayed? HOT 2
- Problem with RegEx flags HOT 1
- Update README HOT 1
- Filevalidator: File validation is not working properly HOT 3
- Warning: Legacy context API has been detected within a strict-mode tree. HOT 1
- support "endAdornment" ? HOT 1
- Validation fails for optional TextValidator with min/max string lengths HOT 2
- TypeError: Cannot read property 'Consumer' of undefined - v1.0.0 HOT 2
- Uncaught TypeError: Cannot read property 'attachToForm' of undefined HOT 1
- Add file extension validation and correct name for current file extension validation
- Need Textarea validation HOT 1
- IsPositive accepts 0 while 0 is not a positive number
- Peer dependency for react 17 HOT 1
- Custom validation name should not contain colon ':' HOT 6
- remote validation
- Polyfill library throwing react-17 dependency warning HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-form-validator-core.