Mono provides a variety of Bootstrap Forms Validation components with a little customization that suits its design standards. For more information, please see the official Bootstrap documentation.

Basic Checkbox


<form>
  <div class="form-row">
    <div class="col-md-12 mb-3">
      <label for="validationServer01">Input with success</label>
      <input type="text" class="form-control border-success" id="validationServer01" placeholder="First name" required>
      <div class="text-success small mt-1">
        Looks good!
      </div>
    </div>
    <div class="col-md-12 mb-3">
      <label for="validationServer02">Input with info</label>
      <input type="text" class="form-control border-info" id="validationServer02" placeholder="Last name"
        value="Last Name" required>
      <div class="text-info small mt-1">
        We'll never share your email with anyone else.
      </div>
    </div>
    <div class="col-md-12 mb-3">
      <label for="validationServer02">Input with warning</label>
      <input type="text" class="form-control border-warning" id="validationServer02" placeholder="Last name"
        value="Last Name" required>
      <div class="text-warning small mt-1">
        Shucks, check the formatting of that and try again.
      </div>
    </div>
    <div class="col-md-12 mb-3">
      <label for="validationServer02">Input with danger</label>
      <input type="text" class="form-control border-danger" id="validationServer02" placeholder="Last name"
        value="Last Name" required>
      <div class="text-daborder-danger small mt-1">
        Sorry, that username's taken. Try another?
      </div>
    </div>
  </div>
  <button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
  <button class="btn btn-light btn-pill" type="submit">Cancel</button>
</form>

          
Looks good!
We'll never share your email with anyone else.
Shucks, check the formatting of that and try again.
Sorry, that username's taken. Try another?

Iconic Validation


<form>
  <div class="mb-5">
    <label for="validationServer01">Left Addon</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username"
        aria-describedby="basic-addon1">
    </div>
    <div class="text-success small mt-1">
      Looks good!
    </div>
  </div>

  <div class="mb-5">
    <label for="validationServer01">Right Addon</label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
        aria-describedby="basic-addon2">
      <div class="input-group-append">
        <span class="input-group-text" id="basic-addon2">@example.com</span>
      </div>
    </div>
    <div class="text-warning small mt-1">
      Shucks, check the formatting of that and try again.
    </div>
  </div>

  <div class="mb-5">
    <label for="validationServer01">Input with danger</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">$</span>
      </div>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <div class="input-group-append">
        <span class="input-group-text">.00</span>
      </div>
    </div>
    <div class="text-danger small mt-1">
      Sorry, that username's taken. Try another?
    </div>
  </div>

  <button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
  <button class="btn btn-light btn-pill" type="submit">Cancel</button>
</form>

          
@
Looks good!
@example.com
Shucks, check the formatting of that and try again.
$
.00
Sorry, that username's taken. Try another?

Horizontal Validation


<form>
  <div class="form-group row mb-6">
    <label for="staticEmail" class="col-sm-4 col-form-label">Input with success</label>
    <div class="col-sm-8">
      <input type="text" class="form-control border-success" id="validationServer01" placeholder="First name" required>
      <div class="text-success small mt-1">
        Looks good!
      </div>
    </div>
  </div>

  <div class="form-group row mb-6">
    <label for="staticEmail" class="col-sm-4 col-form-label">Input with info</label>
    <div class="col-sm-8">
      <input type="text" class="form-control border-info" id="validationServer01" placeholder="First name" required>
      <div class="text-info small mt-1">
        Looks good!
      </div>
    </div>
  </div>

  <div class="form-group row mb-6">
    <label for="staticEmail" class="col-sm-4 col-form-label">Input with warning</label>
    <div class="col-sm-8">
      <input type="text" class="form-control border-warning" id="validationServer01" placeholder="First name" required>
      <div class="text-warning small mt-1">
        Looks good!
      </div>
    </div>
  </div>

  <div class="form-group row mb-6">
    <label for="staticEmail" class="col-sm-4 col-form-label">Input with danger</label>
    <div class="col-sm-8">
      <input type="text" class="form-control border-danger" id="validationServer01" placeholder="First name" required>
      <div class="text-danger small mt-1">
        Looks good!
      </div>
    </div>
  </div>

  <button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
  <button class="btn btn-light btn-pill" type="submit">Cancel</button>
</form>

          
Looks good!
Looks good!
Looks good!
Looks good!

Button Addons Validation


<form>
  <div class="mb-5">
    <label for="validationServer01">Left Addon</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <button class="btn btn-primary" type="button">go</button>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username"
        aria-describedby="basic-addon1">
    </div>
    <div class="text-success small mt-1">
      Looks good!
    </div>
  </div>

  <div class="mb-5">
    <label for="validationServer01">Right Addon</label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="settings" aria-label="Recipient's username"
        aria-describedby="basic-addon2" placeholder="Search for...">
      <div class="input-group-prepend">
        <button class="btn btn-primary" type="button">go</button>
      </div>
    </div>

    <div class="text-warning small mt-1">
      Shucks, check the formatting of that and try again.
    </div>
  </div>

  <div class="mb-5">
    <label for="validationServer01">Input with danger</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <button class="btn btn-primary" type="button">go</button>
      </div>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <div class="input-group-append">
        <button class="btn btn-danger" type="button">go</button>
      </div>
    </div>
    <div class="text-danger small mt-1">
      Sorry, that username's taken. Try another?
    </div>
  </div>

  <button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
  <button class="btn btn-light btn-pill" type="submit">Cancel</button>

</form>

          
Looks good!
Shucks, check the formatting of that and try again.
Sorry, that username's taken. Try another?

Contacts

Add New