DashByte - Premium Dashboard Template

Forms

Validation

Parsley is a javascript form validation library. It helps you provide your users with feedback on their form submission before sending it to your server. It saves you bandwidth, server load and it saves time for your users. Read the Official Official Parsley Documentation for a full list of instructions and other options.

Basic Example

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

<div class="row g-3">
    <div class="col-6">
      <label class="form-label">Firstname</label>
      <input type="text" class="form-control" placeholder="Enter first name" required>
    </div>
    <div class="col-6">
      <label class="form-label">Lastname</label>
      <input type="text" class="form-control" placeholder="Enter last name" required>
    </div>
    <div class="col">
      <button type="submit" class="btn btn-primary">Validate Form</button>
    </div>
  </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".

<form action="form-validation.html" data-parsley-validate>
  <label class="form-label">Email address</label>
  <div class="row gx-3">
    <div class="col-6">
      <input type="email" class="form-control" placeholder="Enter email address" required>
    </div>
    <div class="col-6">
      <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.

<form action="form-validation.html" data-parsley-validate="" novalidate="">
  <p class="mb-3">What is your favorite browser?</p>
  <div id="cbWrapper" class="parsley-checkbox">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="browser[]" value="1" data-parsley-multiple="browser" data-parsley-mincheck="2" data-parsley-class-handler="#cbWrapper" data-parsley-errors-container="#cbErrorContainer" id="cc1" required>
      <label class="form-check-label" for="cc1">
        Firefox
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="browser[]" value="2" data-parsley-multiple="browser" id="cc2">
      <label class="form-check-label" for="cc2">
        Chrome
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="browser[]" value="3" data-parsley-multiple="browser" id="cc3">
      <label class="form-check-label" for="cc3">
        Safari
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="browser[]" value="4" data-parsley-multiple="browser" id="cc4">
      <label class="form-check-label" for="cc4">
        Edge
      </label>
    </div>
  </div><!-- parsley-checkbox -->
  <div id="cbErrorContainer"></div>
  <div class="mt-3"><button type="submit" class="btn btn-primary">Validate Form</button></div>
</form>

Select Validation

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

<form action="form-validation.html" data-parsley-validate>
  <label class="form-label">Choose Browser</label>
  <div class="row gx-3">
    <div class="col-6">
      <div class="parsley-select">
        <select class="form-select" required>
          <option value="" selected>Choose one</option>
          <option value="1">Firefox</option>
          <option value="2">Chrome</option>
          <option value="3">Safari</option>
          <option value="4">Edge</option>
          <option value="5">Opera</option>
        </select>
      </div>
    </div>
    <div class="col-6">
      <button type="submit" class="btn btn-primary">Validate Form</button>
    </div>
  </div><!-- row -->
</form>

Shaira Diaz

Validation

Basic Example

Email Validation

Checkbox/Radio Validation

Select Validation