Topic: MDBInput Validation example
imliviu@gmail.com free asked 4 years ago
How do I use MDBInput in a form with validation? The Validation doc for React https://mdbootstrap.com/docs/react/forms/validation/ reverts back to html with css classes not the react components presented in the form section. Please provide an example of validation using react components.
Jakub Chmura staff answered 4 years ago
Check the example below. It's an example from documentation and it contains MDB components:
import React from "react";
import { MDBRow, MDBCol, MDBInput, MDBBtn } from "mdbreact";
class FormsPage extends React.Component {
state = {
fname: "Mark",
lname: "Otto",
email: "",
city: "",
state: "",
zip: ""
};
submitHandler = event => {
event.preventDefault();
event.target.className += " was-validated";
};
changeHandler = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
return (
<div>
<form
className="needs-validation"
onSubmit={this.submitHandler}
noValidate
>
<MDBRow>
<MDBCol md="4">
<MDBInput
value={this.state.fname}
name="fname"
onChange={this.changeHandler}
type="text"
id="materialFormRegisterNameEx"
label="First name"
required
>
<div className="valid-feedback">Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md="4">
<MDBInput
value={this.state.lname}
name="lname"
onChange={this.changeHandler}
type="text"
id="materialFormRegisterEmailEx2"
label="Last name"
required
>
<div className="valid-feedback">Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md="4">
<MDBInput
value={this.state.email}
onChange={this.changeHandler}
type="email"
id="materialFormRegisterConfirmEx3"
name="email"
label="Your Email address"
>
<small id="emailHelp" className="form-text text-muted">
We'll never share your email with anyone else.
</small>
</MDBInput>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="4">
<MDBInput
value={this.state.city}
onChange={this.changeHandler}
type="text"
id="materialFormRegisterPasswordEx4"
name="city"
label="City"
required
>
<div className="invalid-feedback">
Please provide a valid city.
</div>
<div className="valid-feedback">Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md="4">
<MDBInput
value={this.state.state}
onChange={this.changeHandler}
type="text"
id="materialFormRegisterPasswordEx4"
name="state"
label="State"
required
>
<div className="invalid-feedback">
Please provide a valid state.
</div>
<div className="valid-feedback">Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md="4">
<MDBInput
value={this.state.zip}
onChange={this.changeHandler}
type="text"
id="materialFormRegisterPasswordEx4"
name="zip"
label="Zip"
required
>
<div className="invalid-feedback">
Please provide a valid zip.
</div>
<div className="valid-feedback">Looks good!</div>
</MDBInput>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBInput
type="checkbox"
value="conditions"
id="materialInvalidCheck"
required
label="Agree to terms and conditions"
>
<div className="invalid-feedback">
You must agree before submitting.
</div>
</MDBInput>
</MDBRow>
<MDBBtn color="success" type="submit">
Submit Form
</MDBBtn>
</form>
</div>
);
}
}
export default FormsPage;
Best, Kuba
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.26.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes