Topic: Reset Form Validation

sandor farkas priority asked 9 months ago


Expected behavior I want to be able to reset the form validation errors.

Actual behavior

document.getElementById('product-form').reset() is removing the elements but not the current validation errors.

Removing was-validated class from form has bad side effects.

Resources (screenshots, code snippets etc.) https://mdbootstrap.com/docs/b5/react/forms/validation


sandor farkas priority answered 8 months ago


document.getElementById('product-form').reset() works just fine now!

Thank you!


Krzysztof Wilk staff commented 8 months ago

No problem. If you have more questions - feel free to ask :)


sandor farkas priority answered 8 months ago


@Wojciech Staniszewski It seems nothing has changed regarding my mentioned problem, right? I can't find anything related to a reset in the docs.


Krzysztof Wilk staff commented 8 months ago

Hi!

We refactored our MDBValidation component. The syntax changed and we also expanded the default onReset event - now it also removes the styles :)

Keep coding!


Wojciech Staniszewski staff answered 9 months ago


We are preparing huge changes in the MDBValidation component. The reset option will be also included. It should be released on March 21.


sandor farkas priority answered 9 months ago


Here the snippet: https://mdbootstrap.com/snippets/react/sandorfarkas/3745608#js-tab-view

  • submit the form
  • reset the form
  • you'll see that the error message will stay
  • removing "was-validated" class leads to not validating the form anymore

What would be the right solution for the resetForm method?


Krzysztof Wilk staff answered 9 months ago


Hi!

The MDBValidation component is just a style wrapper for the default form validation APIs in JavaScript, so the proper way to achieve that is by using the isValidated property and form.reset() at the same time. Could you also provide a simple project or code that demonstrates these side effects? If there's something we can improve we'll try to do that :)

Keep coding!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 2.4.0
  • Device: desktop
  • Browser: chrome
  • OS: windows 11
  • Provided sample code: No
  • Provided link: Yes