React Form Validation: MDBSelect does not work


Topic: React Form Validation: MDBSelect does not work

be.careSA free asked 2 years ago

*Expected behavior*When I submit a form with MDBSelect, I expected the same validation that I get with MDBInput or with the select tag.

*Actual behavior*The validation does not work.

Resources (screenshots, code snippets etc.)

Form:

             <form onSubmit={handleSubmit} className={"needs-validation mt-3 mb-3"} noValidate>

                    <div>
                        <MDBSelect label="Example label" required>
                            <MDBSelectInput selected="Choose your country" />
                            <MDBSelectOptions>
                                <MDBSelectOption disabled>Choose your country</MDBSelectOption>
                                <MDBSelectOption value="1">USA</MDBSelectOption>
                                <MDBSelectOption value="2">Germany</MDBSelectOption>
                                <MDBSelectOption value="3">France</MDBSelectOption>
                                <MDBSelectOption value="4">Poland</MDBSelectOption>
                                <MDBSelectOption value="5">Japan</MDBSelectOption>
                            </MDBSelectOptions>
                        </MDBSelect>
                    </div>


                    <div className={"d-flex justify-content-between mt-3"}>

                        <ButtonLink text={"Annuler"} customClassNames={["ml-0"]}
                                    handleClick={handleClick as () => void}/>

                        <MDBBtn className={"btn btn--primary mr-0"}
                                type="submit">{mode === CREATE_MODE ? "Créer nouveau protocol" : "Sauver changements"}</MDBBtn>

                    </div>

                </form>

Submit Function:

   const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
    e.preventDefault();
    e.target.className += " was-validated";
    if (mode === EDIT_MODE) {
        // dispatch<any>(saveProtocolDraft(inEditProtocolDraft as ProtocolDraft, fieldsValue, token, history))
    }
    if (mode === CREATE_MODE) {
        // dispatch<any>(createProtocolDraftInDb(fieldsValue, token, history))
    }
};

Piotr Glejzer staff answered 2 years ago

Hi,

we don't have an example with material select validation in form. We can create this in the future. Sorry about that. Have a nice day.

Best,
Piotr


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.20.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: No
  • Provided link: No