Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Form reset or prevent validation

See original GitHub issue

Hi,

Thanks a lot for this library. It has been really helpful so far, but I found a caveat… Or at least I am not sure to go around it.

I am using availity to validate my inputs on a form. Once it is valid I send an ajax request and I reset the form. But I came upon a problem.

So far all my inputs have:

<AvField name="xxx" required value={this.state.xxx}></AvField>

So the only way I found to reset my form is to do a this.setState({xxx: ''})

But that triggers the validation submit and ends up my form having errors everywhere…

How would you reset the form ‘properly’… I have been struggling with that for a while now…

Thanks a lot

Issue Analytics

State:
Created 4 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

TheSharpieOnecommented, Dec 2, 2019

To reset the form, you can set key on AvForm to something else. This will cause react to create a new instance of AvForm, clearing the internal state.

0reactions

TheSharpieOnecommented, Apr 1, 2020

It’s more of a hack way of reseting, but it’s easy to implement (no need to get a ref or understand the internal workings of the components) https://stackblitz.com/edit/reactstrap-validation-v2-cl7jvy?file=Example.js

Top Results From Across the Web

Prevent validation on form.reset() - javascript - Stack Overflow

The problem is, that when the form resets, it causes the validation to fire, and displays the error message to the user. How...

Reset Validation On An Angular Form - Upmostly

Some forms require the ability to “clear” all input and “reset” the form. I struggled through a few different ways of clearing a...

useForm - reset - React Hook Form

Performant, flexible and extensible forms with easy-to-use validation. ... Avoid calling reset before useForm 's useEffect is invoked, this is because ...

Reactive Form - Reset input validation after change

When set to 'Built-In Validations=No' then you've effectively disabled all checking (and resetting) of the form's fields.

<input type="reset"> - HTML: HyperText Markup Language

Note: You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users ...