Topic: MDBValidation & preventDefault

Two Aow priority asked 1 year ago

Expected behavior Validate form fields and allow me to "catch" form data with button onClick

Actual behavior Validation does not work with preventDefault

Resources (screenshots, code snippets etc.) Garden Variety React form submission usually has an onClick event that prevents the form from submitting so the program can do something with the form data.

  const handleGeneralProfileInfoSubmit = (e) => {

    const address = {
      addressType: currentContactDetailType,
      streetAddress1: addr,
      streetAddress2: addr2,
      city: city,
      region: region,
      postalCode: zip,
// Send data to server

<MDBBtn className="me-1"  color="success" onClick={handleGeneralProfileInfoSubmit}  >

If I use this pattern, MDBValidation does not work. If I remove the onClick handler then MDBValidation works, but the form is submitted and I do not have an opportunity to work with the data as above. What is the secret here? How do I get MDValidation to work AND have access to the form data using the onClick handler?

I thought about putting a submit event in my onclick handler, but same problem. In order to fire validation I would have to call submit event before I sent the data to the server so I would not get an opportunity to do so.

Can you please provide sample code? thank you.

Grzegorz Bujański staff answered 1 year ago

Our validation currently runs on the submit event. So if you add e.preventDefault(); onClick, our validation will not run. We will consider how we can solve this so that our validation works even after e.preventDefault();

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 5.1.0
  • Device: MacBook Pro
  • Browser: Chrome Version 109.0.5414.87 (Official Build) (x86_64)
  • OS: Ventura 13.1
  • Provided sample code: No
  • Provided link: No