React Bootstrap Validation
React Validation - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
React Bootstrap Validation provide valuable, actionable feedback to your users with HTML5 form validation – available in all our supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
Warning
We highly recommend custom validation styles as native browser defaults are not announced to screen readers.
Custom styles
For custom Bootstrap form validation messages, you’ll need to add the noValidate
boolean attribute to your <form>. This disables the browser default feedback tooltips, but still
provides access to the form validation APIs in JavaScript.
When attempting to submit, you’ll see the :invalid and :valid
styles applied to your form controls.
Default styles
import React from "react";
import { MDBRow, MDBCol, 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" className="mb-3">
<label
htmlFor="defaultFormRegisterNameEx"
className="grey-text"
>
First name
</label>
<input
value={this.state.fname}
name="fname"
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterNameEx"
className="form-control"
placeholder="First name"
required
/>
<div className="valid-feedback">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterEmailEx2"
className="grey-text"
>
Last name
</label>
<input
value={this.state.lname}
name="lname"
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterEmailEx2"
className="form-control"
placeholder="Last name"
required
/>
<div className="valid-feedback">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterConfirmEx3"
className="grey-text"
>
Email
</label>
<input
value={this.state.email}
onChange={this.changeHandler}
type="email"
id="defaultFormRegisterConfirmEx3"
className="form-control"
name="email"
placeholder="Your Email address"
/>
<small id="emailHelp" className="form-text text-muted">
We'll never share your email with anyone else.
</small>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
City
</label>
<input
value={this.state.city}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
className="form-control"
name="city"
placeholder="City"
required
/>
<div className="invalid-feedback">
Please provide a valid city.
</div>
<div className="valid-feedback">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
State
</label>
<input
value={this.state.state}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
className="form-control"
name="state"
placeholder="State"
required
/>
<div className="invalid-feedback">
Please provide a valid state.
</div>
<div className="valid-feedback">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
Zip
</label>
<input
value={this.state.zip}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
className="form-control"
name="zip"
placeholder="Zip"
required
/>
<div className="invalid-feedback">
Please provide a valid zip.
</div>
<div className="valid-feedback">Looks good!</div>
</MDBCol>
</MDBRow>
<MDBCol md="4" className="mb-3">
<div className="custom-control custom-checkbox pl-3">
<input
className="custom-control-input"
type="checkbox"
value=""
id="invalidCheck"
required
/>
<label className="custom-control-label" htmlFor="invalidCheck">
Agree to terms and conditions
</label>
<div className="invalid-feedback">
You must agree before submitting.
</div>
</div>
</MDBCol>
<MDBBtn color="primary" type="submit">
Submit Form
</MDBBtn>
</form>
</div>
);
}
}
export default FormsPage;
Material styles MDB Pro component
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;
Browser defaults
Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Depending on your browser and OS, you’ll see a slightly different style of feedback.
Default styles
import React from "react";
import { MDBRow, MDBCol, MDBBtn } from "mdbreact";
class FormsPage extends React.Component {
state = {
fname: "Mark",
lname: "Otto",
email: "",
city: "",
state: "",
zip: ""
};
changeHandler = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
return (
<div>
<form>
<MDBRow>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterNameEx"
className="grey-text"
>
First name
</label>
<input
value={this.state.fname}
name="fname"
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterNameEx"
className="form-control"
placeholder="First name"
required
/>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterEmailEx2"
className="grey-text"
>
Last name
</label>
<input
value={this.state.lname}
name="lname"
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterEmailEx2"
className="form-control"
placeholder="Last name"
required
/>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterConfirmEx3"
className="grey-text"
>
Email
</label>
<input
value={this.state.email}
onChange={this.changeHandler}
type="email"
id="defaultFormRegisterConfirmEx3"
className="form-control"
name="email"
placeholder="Your Email address"
/>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
City
</label>
<input
value={this.state.city}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
className="form-control"
name="city"
placeholder="City"
required
/>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
State
</label>
<input
value={this.state.state}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
className="form-control"
name="state"
placeholder="State"
required
/>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
Zip
</label>
<input
value={this.state.zip}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
className="form-control"
name="zip"
placeholder="Zip"
required
/>
</MDBCol>
</MDBRow>
<MDBCol md="4" className="mb-3">
<div className="custom-control custom-checkbox pl-3">
<input
className="custom-control-input"
type="checkbox"
value=""
id="invalidCheck"
required
/>
<label className="custom-control-label" htmlFor="invalidCheck">
Agree to terms and conditions
</label>
</div>
</MDBCol>
<MDBBtn color="primary" type="submit">
Submit Form
</MDBBtn>
</form>
</div>
);
}
}
export default FormsPage;
Material styles MDB Pro component
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: ""
};
changeHandler = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
return (
<div>
<form>
<MDBRow>
<MDBCol md="4">
<MDBInput
value={this.state.fname}
name="fname"
onChange={this.changeHandler}
type="text"
id="materialFormRegisterNameEx"
label="First name"
required
/>
</MDBCol>
<MDBCol md="4">
<MDBInput
value={this.state.lname}
name="lname"
onChange={this.changeHandler}
type="text"
id="materialFormRegisterEmailEx2"
label="Last name"
required
/>
</MDBCol>
<MDBCol md="4">
<MDBInput
value={this.state.email}
onChange={this.changeHandler}
type="email"
id="materialFormRegisterConfirmEx3"
name="email"
label="Your Email address"
/>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="4">
<MDBInput
value={this.state.city}
onChange={this.changeHandler}
type="text"
id="materialFormRegisterPasswordEx4"
name="city"
label="City"
required
/>
</MDBCol>
<MDBCol md="4">
<MDBInput
value={this.state.state}
onChange={this.changeHandler}
type="text"
id="materialFormRegisterPasswordEx4"
name="state"
label="State"
required
/>
</MDBCol>
<MDBCol md="4">
<MDBInput
value={this.state.zip}
onChange={this.changeHandler}
type="text"
id="materialFormRegisterPasswordEx4"
name="zip"
label="Zip"
required
/>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBInput
type="checkbox"
value="conditions"
id="materialInvalidCheck"
required
label="Agree to terms and conditions"
/>
</MDBRow>
<MDBBtn color="success" type="submit">
Submit Form
</MDBBtn>
</form>
</div>
);
}
}
export default FormsPage;
Server side
We recommend using client side validation, but in case you require server side, you can
indicate invalid and valid form fields with .is-invalid and .is-valid classes.
Default styles
import React from "react";
import { MDBRow, MDBCol, MDBBtn } from "mdbreact";
class FormsPage extends React.Component {
state = {
fname: {
value: "Mark",
valid: true
},
lname: {
value: "Otto",
valid: true
},
email: {
value: "",
valid: false
},
city: {
value: "",
valid: false
},
state: {
value: "",
valid: false
},
zip: {
value: "",
valid: false
}
};
changeHandler = event => {
this.setState({ [event.target.name]: { value: event.target.value, valid: !!event.target.value } });
};
render() {
return (
<div>
<form>
<MDBRow>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterNameEx"
className="grey-text"
>
First name
</label>
<input
value={this.state.fname.value}
className={this.state.fname.valid ? "form-control is-valid" : "form-control is-invalid"}
name="fname"
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterNameEx"
placeholder="First name"
required
/>
<div className="valid-feedback">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterEmailEx2"
className="grey-text"
>
Last name
</label>
<input
value={this.state.lname.value}
className={this.state.lname.valid ? "form-control is-valid" : "form-control is-invalid"}
name="lname"
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterEmailEx2"
placeholder="Last name"
required
/>
<div className="valid-feedback">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterConfirmEx3"
className="grey-text"
>
Email
</label>
<input
value={this.state.email.value}
className={this.state.email.valid ? "form-control is-valid" : "form-control is-invalid"}
onChange={this.changeHandler}
type="email"
id="defaultFormRegisterConfirmEx3"
name="email"
placeholder="Your Email address"
/>
<small id="emailHelp" className="form-text text-muted">
We'll never share your email with anyone else.
</small>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
City
</label>
<input
value={this.state.city.value}
className={this.state.city.valid ? "form-control is-valid" : "form-control is-invalid"}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
name="city"
placeholder="City"
required
/>
<div className="invalid-feedback">
Please provide a valid city.
</div>
<div className="valid-feedback">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
State
</label>
<input
value={this.state.state.value}
className={this.state.state.valid ? "form-control is-valid" : "form-control is-invalid"}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
name="state"
placeholder="State"
required
/>
<div className="invalid-feedback">
Please provide a valid state.
</div>
<div className="valid-feedback">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
Zip
</label>
<input
value={this.state.zip.value}
className={this.state.zip.valid ? "form-control is-valid" : "form-control is-invalid"}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
className="form-control"
name="zip"
placeholder="Zip"
required
/>
<div className="invalid-feedback">
Please provide a valid zip.
</div>
<div className="valid-feedback">Looks good!</div>
</MDBCol>
</MDBRow>
<MDBCol md="4" className="mb-3">
<div className="custom-control custom-checkbox pl-3">
<input
className="custom-control-input"
type="checkbox"
value=""
id="invalidCheck"
required
/>
<label className="custom-control-label" htmlFor="invalidCheck">
Agree to terms and conditions
</label>
<div className="invalid-feedback">
You must agree before submitting.
</div>
</div>
</MDBCol>
<MDBBtn color="primary" type="submit">
Submit Form
</MDBBtn>
</form>
</div>
);
}
}
export default FormsPage;
Material styles MDB Pro component
import React from "react";
import { MDBRow, MDBCol, MDBInput, MDBBtn } from "mdbreact";
class FormsPage extends React.Component {
state = {
fname: {
value: "Mark",
valid: true
},
lname: {
value: "Otto",
valid: true
},
email: {
value: "",
valid: false
},
city: {
value: "",
valid: false
},
state: {
value: "",
valid: false
},
zip: {
value: "",
valid: false
}
};
changeHandler = event => {
this.setState({ [event.target.name]: { value: event.target.value, valid: !!event.target.value } });
};
render() {
return (
<div>
<form>
<MDBRow>
<MDBCol md="4">
<MDBInput
value={this.state.fname.value}
className={this.state.fname.valid ? "is-valid" : "is-invalid"}
name="fname"
onChange={this.changeHandler}
type="text"
id="materialFormRegisterNameEx"
label="First name"
required
>
<div className="valid-feedback">Looks good!</div>
<div className="invalid-feedback">Provide a valid name!</div>
</MDBInput>
</MDBCol>
<MDBCol md="4">
<MDBInput
value={this.state.lname.value}
className={this.state.lname.valid ? "is-valid" : "is-invalid"}
name="lname"
onChange={this.changeHandler}
type="text"
id="materialFormRegisterEmailEx2"
label="Last name"
required
>
<div className="valid-feedback">Looks good!</div>
<div className="invalid-feedback">Provide a valid last name!</div>
</MDBInput>
</MDBCol>
<MDBCol md="4">
<MDBInput
value={this.state.email.value}
className={this.state.email.valid ? "is-valid" : "is-invalid"}
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.value}
className={this.state.city.valid ? "is-valid" : "is-invalid"}
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.value}
className={this.state.state.valid ? "is-valid" : "is-invalid"}
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.value}
className={this.state.zip.valid ? "is-valid" : "is-invalid"}
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;
Supported elements
Default styles
import React from "react";
class FormsPage extends React.Component {
render() {
return (
<form className="was-validated" noValidate>
<div className="custom-control custom-checkbox mb-3">
<input
type="checkbox"
className="custom-control-input"
id="customControlValidation1"
required
/>
<label
className="custom-control-label"
htmlFor="customControlValidation1"
>
Check this custom checkbox
</label>
<div className="invalid-feedback">
Example invalid feedback text
</div>
</div>
<div className="custom-control custom-radio">
<input
type="radio"
className="custom-control-input"
id="customControlValidation2"
name="radio-stacked"
required
/>
<label
className="custom-control-label"
htmlFor="customControlValidation2"
>
Toggle this custom radio
</label>
</div>
<div className="custom-control custom-radio mb-3">
<input
type="radio"
className="custom-control-input"
id="customControlValidation3"
name="radio-stacked"
required
/>
<label
className="custom-control-label"
htmlFor="customControlValidation3"
>
Or toggle this other custom radio
</label>
<div className="invalid-feedback">
More example invalid feedback text
</div>
</div>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id="validatedCustomFile"
required
/>
<label
className="custom-file-label"
htmlFor="validatedCustomFile"
>
Choose file...
</label>
<div className="invalid-feedback">
Example invalid custom file feedback
</div>
</div>
</form>
);
}
}
export default FormsPage;
Material styles MDB Pro component
import React from "react";
import { MDBInput } from "mdbreact";
class FormsPage extends React.Component {
render() {
return (
<form className="was-validated" noValidate>
<MDBInput
type="checkbox"
id="customControlValidation1"
label="Check this custom checkbox"
required
>
<div className="invalid-feedback">
Example invalid feedback text
</div>
</MDBInput>
<MDBInput
type="radio"
id="customControlValidation2"
name="radio-stacked"
required
label="Toggle this custom radio"
/>
<MDBInput
type="radio"
id="customControlValidation3"
name="radio-stacked"
required
label="Or toggle this other custom radio"
>
<div className="invalid-feedback">
Example invalid feedback text
</div>
</MDBInput>
</form>
);
}
}
export default FormsPage;
Tooltips
If your form layout allows it, you can swap the .{valid|invalid}-feedback
classes to .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be
sure to have a parent with position: relative on it for tooltip positioning. In the example below,
our
column classes have this already, but your project may require an alternative setup.
Default styles
import React from "react";
import { MDBRow, MDBCol, 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" className="mb-3">
<label
htmlFor="defaultFormRegisterNameEx"
className="grey-text"
>
First name
</label>
<input
value={this.state.fname}
name="fname"
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterNameEx"
className="form-control"
placeholder="First name"
required
/>
<div className="valid-tooltip">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterEmailEx2"
className="grey-text"
>
Last name
</label>
<input
value={this.state.lname}
name="lname"
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterEmailEx2"
className="form-control"
placeholder="Last name"
required
/>
<div className="valid-tooltip">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterConfirmEx3"
className="grey-text"
>
Email
</label>
<input
value={this.state.email}
onChange={this.changeHandler}
type="email"
id="defaultFormRegisterConfirmEx3"
className="form-control"
name="email"
placeholder="Your Email address"
/>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
City
</label>
<input
value={this.state.city}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
className="form-control"
name="city"
placeholder="City"
required
/>
<div className="invalid-tooltip">
Please provide a valid city.
</div>
<div className="valid-tooltip">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
State
</label>
<input
value={this.state.state}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
className="form-control"
name="state"
placeholder="State"
required
/>
<div className="invalid-tooltip">
Please provide a valid state.
</div>
<div className="valid-tooltip">Looks good!</div>
</MDBCol>
<MDBCol md="4" className="mb-3">
<label
htmlFor="defaultFormRegisterPasswordEx4"
className="grey-text"
>
Zip
</label>
<input
value={this.state.zip}
onChange={this.changeHandler}
type="text"
id="defaultFormRegisterPasswordEx4"
className="form-control"
name="zip"
placeholder="Zip"
required
/>
<div className="invalid-tooltip">
Please provide a valid zip.
</div>
<div className="valid-tooltip">Looks good!</div>
</MDBCol>
</MDBRow>
<MDBBtn color="primary" type="submit">
Submit Form
</MDBBtn>
</form>
</div>
);
}
}
export default FormsPage;
Material styles MDB Pro component
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-tooltip">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-tooltip">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"
>
</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-tooltip">
Please provide a valid city.
</div>
<div className="valid-tooltip">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-tooltip">
Please provide a valid state.
</div>
<div className="valid-tooltip">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-tooltip">
Please provide a valid zip.
</div>
<div className="valid-tooltip">Looks good!</div>
</MDBInput>
</MDBCol>
</MDBRow>
<MDBBtn color="success" type="submit">
Submit Form
</MDBBtn>
</form>
</div>
);
}
}
export default FormsPage;
Inputs with icons
In input with icon, validation feedback appear for default at the beginning of the line
under icon. If you want to display validation exactly under input, you must add additional classes after valid-feedback class in your validation feedback container.
In outline styles : ml-3 pl-3, for example: <div class="valid-feedback ml-3 pl-3">
Valid feedback.
<div>
In material styles : ml-4 pl-3, for example: <div class="invalid-feedback ml-4 pl-3">
Invalid feedback.
<div>
Outline styles
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
icon='user'
value={this.state.fname}
name='fname'
onChange={this.changeHandler}
type='text'
id='materialFormRegisterNameEx'
label='First name'
outline
required
>
<div className='valid-feedback ml-3 pl-3'>Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md='4'>
<MDBInput
icon='address-card'
value={this.state.lname}
name='lname'
onChange={this.changeHandler}
type='text'
id='materialFormRegisterEmailEx2'
label='Last name'
outline
required
>
<div className='valid-feedback ml-3 pl-3'>Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md='4'>
<MDBInput
icon='envelope-open'
value={this.state.email}
onChange={this.changeHandler}
type='email'
id='materialFormRegisterConfirmEx3'
name='email'
label='Your Email address'
outline
>
<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
icon='city'
value={this.state.city}
onChange={this.changeHandler}
type='text'
id='materialFormRegisterPasswordEx4'
name='city'
label='City'
outline
required
>
<div className='invalid-feedback ml-3 pl-3'>
Please provide a valid city.
</div>
<div className='valid-feedback ml-3 pl-3'>Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md='4'>
<MDBInput
icon='map-marked-alt'
value={this.state.state}
onChange={this.changeHandler}
type='text'
id='materialFormRegisterPasswordEx4'
name='state'
label='State'
outline
required
>
<div className='invalid-feedback ml-3 pl-3'>
Please provide a valid state.
</div>
<div className='valid-feedback ml-3 pl-3'>Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md='4'>
<MDBInput
icon='location-arrow'
value={this.state.zip}
onChange={this.changeHandler}
type='text'
id='materialFormRegisterPasswordEx4'
name='zip'
label='Zip'
outline
required
>
<div className='invalid-feedback ml-3 pl-3'>
Please provide a valid zip.
</div>
<div className='valid-feedback ml-3 pl-3'>Looks good!</div>
</MDBInput>
</MDBCol>
</MDBRow>
<MDBCol md='4' className='mb-3'>
<div className='custom-control custom-checkbox pl-3'>
<input
className='custom-control-input'
type='checkbox'
value=''
id='invalidCheck'
required
/>
<label className='custom-control-label' htmlFor='invalidCheck'>
Agree to terms and conditions
</label>
<div className='invalid-feedback'>
You must agree before submitting.
</div>
</div>
</MDBCol>
<MDBBtn color='primary' type='submit'>
Submit Form
</MDBBtn>
</form>
</div>
);
}
}
export default FormsPage;
Material styles MDB Pro component
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
icon='user'
value={this.state.fname}
name='fname'
onChange={this.changeHandler}
type='text'
id='materialFormRegisterNameEx'
label='First name'
required
>
<div className='valid-feedback ml-4 pl-3'>Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md='4'>
<MDBInput
icon='address-card'
value={this.state.lname}
name='lname'
onChange={this.changeHandler}
type='text'
id='materialFormRegisterEmailEx2'
label='Last name'
required
>
<div className='valid-feedback ml-4 pl-3'>Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md='4'>
<MDBInput
icon='envelope-open'
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
icon='city'
value={this.state.city}
onChange={this.changeHandler}
type='text'
id='materialFormRegisterPasswordEx4'
name='city'
label='City'
required
>
<div className='invalid-feedback ml-4 pl-3'>
Please provide a valid city.
</div>
<div className='valid-feedback ml-4 pl-3'>Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md='4'>
<MDBInput
icon='map-marked-alt'
value={this.state.state}
onChange={this.changeHandler}
type='text'
id='materialFormRegisterPasswordEx4'
name='state'
label='State'
required
>
<div className='invalid-feedback ml-4 pl-3'>
Please provide a valid state.
</div>
<div className='valid-feedback ml-4 pl-3'>Looks good!</div>
</MDBInput>
</MDBCol>
<MDBCol md='4'>
<MDBInput
icon='location-arrow'
value={this.state.zip}
onChange={this.changeHandler}
type='text'
id='materialFormRegisterPasswordEx4'
name='zip'
label='Zip'
required
>
<div className='invalid-feedback ml-4 pl-3'>
Please provide a valid zip.
</div>
<div className='valid-feedback ml-4 pl-3'>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='primary' type='submit'>
Submit Form
</MDBBtn>
</form>
</div>
);
}
}
export default FormsPage;
React Validation - API
In this section you will find advanced information about the React Validation component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.
Import statement
In order to use Validation component make sure you have imported proper module first.
import React from 'react';
import { MDBInput } from 'mdbreact';
Usage
Here’s how form validation works with Bootstrap:
- HTML form validation is applied via CSS’s two pseudo-classes,
:invalidand:valid. It applies to<input>,<select>, and<textarea>elements. - Bootstrap scopes the
:invalidand:validstyles to parent.was-validatedclass, usually applied to the<form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted). - To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove
the
.was-validatedclass from the<form>again after submission. - As a fallback,
.is-invalidand.is-validclasses may be used instead of the pseudo-classes for server side validation. They do not require a.was-validatedparent class. - All modern browsers support the constraint validation API, a series of JavaScript methods for validating form controls.
- Feedback messages may utilize the browser defaults (different for each browser, and unstylable via CSS) or our custom feedback styles.
- You may provide custom validity messages with just passing the elements with classes
.valid-feedbackand.invalid-feedbackas children of the MDBInput component.
import React from "react";
import { MDBInput } from "mdbreact";
class FormExample extends React.Component {
state = {
fname: "Mark"
};
submitHandler = event => {
event.preventDefault();
event.target.className += " was-validated";
};
changeHandler = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
return (
<form
className="needs-validation"
onSubmit={this.submitHandler}
noValidate
>
<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>
<div className="invalid-feedback">Try better next time!</div>
</MDBInput>
</form>
);
}
}
export default FormExample;
API Reference: Properties
The table below shows the configuration options of the MDBInput component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
checked |
Boolean | false |
Pre-selects checkbox/radio button when the page loads. | <MDBInput checked /> |
className |
String | Adds custom class to Input component | <MDBInput className="myClass" /> |
|
containerClass |
String | Adds custom class to wrapping div | <MDBInput containerClass="wrapper" /> |
|
disabled |
Boolean | false |
Disables input component | <MDBInput disabled /> |
error |
String | Sets the error message for the labels data-error attribute |
<MDBInput error="Whoops!" /> |
|
filled |
Boolean | false |
Add filled-in style to checkbox/radio button | <MDBInput type="checkbox" filled /> |
gap |
Boolean | false |
Creates gap inside checkbox/radio button | <MDBInput type="checkbox" gap /> |
group |
Boolean | false |
Add .form-group class to the wrapping div | <MDBInput group /> |
hint |
String | Sets the placeholder for the Input | <MDBInput hint="Placeholder" /> |
|
icon |
String | |
Adds font-awesome icon |
<MDBInput icon="caret-right" />
|
iconBrand |
Boolean | false |
Use this property to set brand icon (fab) |
<MDBInput icon="twitter" iconBrand />
|
iconClassName |
String | |
Adds custom classes to icon element |
<MDBInput icon="envelope" iconClassName="customClass" />
|
iconLight |
Boolean | false |
Use this property to set light icon (fal) |
<MDBInput icon="twitter" iconLight />
|
iconRegular |
Boolean | false |
Use this property to set regular icon (far) |
<MDBInput icon="twitter" iconRegular />
|
iconSize |
String | |
Sets icon size |
<MDBInput icon="pencil-alt" size="5x" />
|
id |
String | Required! Set the id of the input element | <MDBInput id="myId" /> |
|
inputRef |
Function | Allows to attach React Ref to the input component; accepts only Callback Ref | <MDBInput inputRef={ref => this.myRef = ref } /> |
|
label |
String | Add label to the component; you can attach jsx elements (f.e. links) | <MDBInput label="My custom input" /> |
|
labelClass |
String | Adds custom class to the label | <MDBInput labelClass="labelCustomClass" /> |
|
size |
String | Changes size of the component; available lg and sm |
<MDBInput size="sm" /> |
|
success |
String | Sets the success message for the labels data-success attribute |
<MDBInput success="Yeah!" /> |
|
tag |
String | input |
Changes default input tag | <MDBInput tag="div" /> |
type |
String | text |
The type of the input element | <MDBInput type="checkbox" /> |
validate |
Boolean | false |
Adds .validate class to the Input component | <MDBInput validate /> |
value |
String | The value of the input element (use with the controlled input) | <MDBInput value="I am controlled" onChange={this.handleChange} /> |
|
valueDefault |
String | The default value of the input (use with the uncontrolled input) | <MDBInput valueDefault="I am uncontrolled" /> |
API Reference: Methods
The table below shows the methods which you can use with MDBInput component.
| Name | Parameters | Description | Example |
|---|---|---|---|
getValue |
Method called on input change event; returns input value | <MDBInput getValue={this.getValue} /> |
|
onBlur |
Method called on blur event, the blur event is raised when an element loses focus; returns event object | <MDBInput onBlur={this.handleBlur} /> |
|
onChange |
Method called on change event; returns event object | <MDBInput onChange={this.handleChange} /> |
|
onFocus |
Method called on focus event, the focus event is raised when the user sets focus on en element; returns event object | <MDBInput onFocus={this.handleFocus} /> |
|
onInput |
Method called on input event; returns event object | <MDBInput onInput={this.handleInput} /> |