Topic: React Form Validation: MDBSelect does not work
be.careSA free asked 5 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 5 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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