Katniss Responsive Bootstrap 4 Admin Template

Form Validation

Required Input Validation

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

Source Code

<form method="post" action="form-validation.html" data-parsley-validate>
<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><!-- 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><!-- form-group -->
  </div><!-- d-flex -->
  <button type="submit" class="btn btn-default">Validate Form</button>
</div>
</form>

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".

Source Code

<form action="form-validation.html" data-parsley-validate>
<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><!-- form-group -->
  <div class="mg-l-10 mg-t-25 pd-t-4">
    <button type="submit" class="btn btn-default">Validate Email</button>
  </div>
</div>
</form>

Checkbox/Radio Validation

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

Source Code

<form method="post" action="form-validation.html" data-parsley-validate>
<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">
  <label class="ckbox">
    <input type="checkbox" name="browser[]" value="1" data-parsley-mincheck="2"
    data-parsley-class-handler="#cbWrapper"
    data-parsley-errors-container="#cbErrorContainer" required><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-default" value="5">Validate Form</button>
</div>
</form>

Select Box Validation

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

Source Code

<form action="form-validation.html" id="selectForm">
<div class="d-flex">
  <div id="slWrapper" class="parsley-select wd-250">
    <select class="form-control select2" data-placeholder="Choose one"
    data-parsley-class-handler="#slWrapper"
    data-parsley-errors-container="#slErrorContainer" 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-default" value="5">Validate Form</button></div>
</div><!-- d-flex -->
</form>