Daily Newsletter

Get notified when someone else is trying to access your account.

Call Phones

Make calls to friends and family right from your account.

Login Notifications

Get notified when someone else is trying to access your account.

Phone Approvals

Use your phone when login as an extra layer of security.

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-info">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-info">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? *

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-info" 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-info" value="5">Validate Form</button></div>
</div><!-- d-flex -->
</form>