web
mobile
Edit these docs Rate these docs

React Bootstrap Validation

React Validation - Bootstrap 4 & Material Design

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

Looks good!
Looks good!
We'll never share your email with anyone else.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

          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

Looks good!
Looks good!
We'll never share your email with anyone else.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

          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

Looks good!
Looks good!
We'll never share your email with anyone else.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

          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

Looks good!
Looks good!
We'll never share your email with anyone else.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

          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

Example invalid feedback text
More example invalid feedback text
Example invalid custom file feedback

            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

Example invalid feedback text
More example invalid feedback text

            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

Looks good!
Looks good!
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

          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

Looks good!
Looks good!
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

          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

Looks good!
Looks good!
We'll never share your email with anyone else.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

          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

Looks good!
Looks good!
We'll never share your email with anyone else.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

          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;
        
Edit these docs Rate these docs

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, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
  • Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, 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-validated class from the <form> again after submission.
  • As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent 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-feedback and .invalid-feedback as 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} />