Required Input Validation

This is a demo of a required field that must not leave empty.

Firstname: *

Firstname is required.

Lastname: *

Lastname is required.

Validate Form

Source Code

<form method="post" action="form-validation.html" class="needs-validation" novalidate>
  <div class="wd-300">
    <div class="d-flex mg-b-30">
      <div class="form-group mg-b-0">
        <label>Firstname: <span class="tx-danger">*</span></label>
        <input type="text" name="firstname" class="form-control wd-250" placeholder="Enter firstname" required>
        <div class="invalid-feedback">Firstname is required.</div>
      </div><!-- form-group -->
      <div class="form-group mg-b-0 mg-l-20">
        <label>Lastname: <span class="tx-danger">*</span></label>
        <input type="text" name="lastname" class="form-control wd-250" placeholder="Enter lastname" required>
        <div class="invalid-feedback">Lastname is required.</div>
      </div><!-- form-group -->
    </div><!-- d-flex -->
    <button type="submit" class="btn btn-primary">Validate Form</button>
  </div>
</form>

Attribute Reference

Attribute	Description
novalidate + .needs-validation	Disables the browser's default validation UI so Bootstrap's .was-validated/.invalid-feedback styling can take over instead; a small script (see below) adds .was-validated to the form on submit.
required	Native HTML5 constraint: validates that a required field has been filled with a non blank value.

Email Validation

A demo of an email field that is required and must also be a valid email address.
It automatically validate an email when the field is in type="email".

Email: *

Enter a valid email address.

Validate Email

Source Code

<form action="form-validation.html" class="needs-validation" novalidate>
  <div class="d-flex wd-300">
    <div class="form-group mg-b-0">
      <label>Email: <span class="tx-danger">*</span></label>
      <input type="email" name="email" class="form-control wd-250" placeholder="Enter email" required>
      <div class="invalid-feedback">Enter a valid email address.</div>
    </div><!-- form-group -->
    <div class="mg-l-10 mg-t-25 pd-t-4">
      <button type="submit" class="btn btn-primary">Validate Email</button>
    </div>
  </div>
</form>

Checkbox/Radio Validation

A demo of checkboxes that must be selected at least two fom any given list.

What is your favorite browser? *

Firefox Chrome Safari Edge

Validate Form

Source Code

<form method="post" action="form-validation.html" id="checkboxForm" class="needs-validation" novalidate>
  <p class="mg-b-10">What is your favorite browser? <span class="tx-danger">*</span></p>
  <div id="cbWrapper" class="parsley-checkbox mg-b-0" data-mincheck="2">
    <label class="ckbox">
      <input type="checkbox" name="browser[]" value="1"><span>Firefox</span>
    </label>
    <label class="ckbox">
      <input type="checkbox" name="browser[]" value="2"><span>Chrome</span>
    </label>
    <label class="ckbox">
      <input type="checkbox" name="browser[]" value="3"><span>Safari</span>
    </label>
    <label class="ckbox">
      <input type="checkbox" name="browser[]" value="4"><span>Edge</span>
    </label>
  </div><!-- parsley-checkbox -->
  <div id="cbErrorContainer"></div>
  <div class="mg-t-20">
    <button type="submit" class="btn btn-primary" value="5">Validate Form</button>
  </div>
</form>

<script>
  // A checkbox-group minimum-check count has no native HTML5 constraint,
  // so it's validated by hand: count how many are checked, toggle the
  // .parsley-error/.parsley-success classes bracket.css already styles.
  var wrapper = document.getElementById('cbWrapper');
  var min = +wrapper.dataset.mincheck;
  var checked = wrapper.querySelectorAll('input:checked').length;
  var valid = checked >= min;
  wrapper.classList.toggle('parsley-error', !valid);
  wrapper.classList.toggle('parsley-success', valid);
</script>

Attribute Reference

Attribute	Description
novalidate + .needs-validation	Disables the browser's default validation UI so Bootstrap's .was-validated/.invalid-feedback styling can take over instead.
data-mincheck="2"	Read by the page's own validation script (not a browser constraint) to require a minimum number of checked boxes in the group.
.parsley-checkbox.parsley-error / .parsley-success	Existing theme CSS classes (no library dependency) that style the checkbox group's error/success state; toggled by the page script above.

Select Box Validation

A demo of select boxes that must be selected at least one fom any given option.

Firefox Chrome Safari Opera Internet Explorer

Validate Form

Source Code

<form action="form-validation.html" id="selectForm" novalidate>
  <div class="d-flex">
    <div id="slWrapper" class="parsley-select wd-250">
      <select class="form-control select2" data-placeholder="Choose one" required>
        <option label="Choose one"></option>
        <option value="Firefox">Firefox</option>
        <option value="Chrome">Chrome</option>
        <option value="Safari">Safari</option>
        <option value="Opera">Opera</option>
        <option value="Internet Explorer">Internet Explorer</option>
      </select>
      <div id="slErrorContainer"></div>
    </div>
    <div class="mg-l-10"><button type="submit" class="btn btn-primary" value="5">Validate Form</button></div>
  </div><!-- d-flex -->
</form>

Attribute Reference

Attribute	Description
novalidate	Disables the browser's default validation UI on this form; the page's own script (below) validates on submit instead so it can drive select2's non-native widget.
required	Native HTML5 constraint on the underlying <select>, checked via .checkValidity().
.parsley-select.parsley-error / .parsley-success	Existing theme CSS classes (no library dependency) that style select2's error/success state; toggled by the page script.

Using Custom Layout

A demo for using custom layout for validation.

Firstname: *

Lastname: *

Email address: *

Validate Form

Custom Styled Error Message

A demo for using custom styled messages for error container.

Firstname: *

Lastname: *

What is your favorite browser? *

Firefox Chrome Safari Edge

Firefox Chrome Safari Opera Internet Explorer

Validate Form

Source Code

<form id="selectForm2" class="parsley-style-1" action="form-validation.html" novalidate>
  <div class="wd-300">
    <div class="d-flex mg-b-30">
      <div id="fnWrapper" class="parsley-input">
        <label>Firstname: <span class="tx-danger">*</span></label>
        <input type="text" name="firstname" class="form-control wd-250" placeholder="Enter firstname" required>
      </div><!-- form-group -->
      <div id="lnWrapper" class="parsley-input mg-l-20">
        <label>Lastname: <span class="tx-danger">*</span></label>
        <input type="text" name="lastname" class="form-control wd-250" placeholder="Enter lastname" required>
      </div><!-- form-group -->
    </div><!-- d-flex -->
  </div>
  <p class="mg-b-10">What is your favorite browser? <span class="tx-danger">*</span></p>
  <div id="cbWrapper2" class="parsley-checkbox wd-250 mg-b-0" data-mincheck="2">
    <label class="ckbox">
      <input type="checkbox" name="browser[]" value="1"><span>Firefox</span>
    </label>
    <label class="ckbox">
      <input type="checkbox" name="browser[]" value="2"><span>Chrome</span>
    </label>
    <label class="ckbox">
      <input type="checkbox" name="browser[]" value="3"><span>Safari</span>
    </label>
    <label class="ckbox">
      <input type="checkbox" name="browser[]" value="4"><span>Edge</span>
    </label>
  </div><!-- parsley-checkbox -->
  <div id="cbErrorContainer2" class="wd-250"></div>

  <div id="slWrapper2" class="parsley-select wd-250 mg-t-30">
    <select class="form-control select2" data-placeholder="Choose one" required>
      <option label="Choose one"></option>
      <option value="Firefox">Firefox</option>
      <option value="Chrome">Chrome</option>
      <option value="Safari">Safari</option>
      <option value="Opera">Opera</option>
      <option value="Internet Explorer">Internet Explorer</option>
    </select>
    <div id="slErrorContainer2"></div>
  </div>

  <div class="mg-t-30">
    <button type="submit" class="btn btn-primary tx-11 pd-y-12 tx-uppercase tx-spacing-2">Validate Form</button>
  </div>
</form>

Class Reference

Class	Description
class="parsley-input"	Existing theme CSS class (no library dependency) -- wrap an input with it, and the page's validation script toggles .parsley-error/.parsley-success on submit for a custom styled error message.