[bracket plus]
Navigation
Information Summary

Memory Usage

##### 32.3%

8,6,5,9,8,4,9,3,5,9

CPU Usage

##### 140.05

4,3,5,7,12,10,4,5,11,7

Disk Usage

##### 82.02%

1,2,1,3,2,10,4,12,7

Daily Traffic

##### 62,201

3,12,7,9,2,3,4,5,2
Online Contacts

Marilyn Tarter

Clemson, CA
1 new

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI
3 new

Brandon Lawrence

Snohomish, WA
1 new

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Offline Contacts

Marilyn Tarter

Clemson, CA

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI

Brandon Lawrence

Snohomish, WA

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Recent Attachments

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

Time & Date

##

######

Events Calendar
Event Today
+ Add Event
Quick Settings

###### More Settings

Account Settings Privacy Settings

#### Form Validation

This template uses Parsley for form validation. Parsley is the ultimate javascript form validation library.

###### Required Input Validation

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

Firstname: *
Lastname: *

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-primary">Validate Form</button>
      </div>
    </form>

Attribute Reference

Attribute | Description
--- | ---
`data-parsley-validate` | Parsley the validator looks at all data-parsley-validate occurrences in DOM on document load and automatically binds them if valid.
`required` | 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: *

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

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-primary" value="5">Validate Form</button>
      </div>
    </form>

Attribute Reference

Attribute | Description
--- | ---
`data-parsley-validate` | Parsley the validator looks at all data-parsley-validate occurrences in DOM on document load and automatically binds them if valid.
`required` | Validates that a required field has been filled with a non blank value.
`data-parsley-mincheck="2"` | Validates that a certain minimum number of checkboxes in a group are checked.
`data-parsley-class-handler="#cbWrapper"` | Specify the existing DOM container where ParsleyUI should add error and success classes.
`data-parsley-errors-container="#cbErrorContainer"` | Specify the existing DOM container where ParsleyUI should put the errors.

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

Attribute Reference

Attribute | Description
--- | ---
`data-parsley-validate` | Parsley the validator looks at all data-parsley-validate occurrences in DOM on document load and automatically binds them if valid.
`required` | Validates that a required field has been filled with a non blank value.
`data-parsley-class-handler="#slWrapper"` | Specify the existing DOM container where ParsleyUI should add error and success classes.
`data-parsley-errors-container="#slErrorContainer"` | Specify the existing DOM container where ParsleyUI should put the errors.

###### Using Custom Layout

A demo for using custom layout for validation.

Firstname: *
Lastname: *
Email address: *

###### 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

Source Code

    <form id="selectForm2" class="parsley-style-1" action="form-validation.html">
      <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"
            data-parsley-class-handler="#fnWrapper" 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"
            data-parsley-class-handler="#lnWrapper" 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">
        <label class="ckbox">
          <input type="checkbox" name="browser[]" value="1" data-parsley-mincheck="2"
          data-parsley-class-handler="#cbWrapper2"
          data-parsley-errors-container="#cbErrorContainer2" 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="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"
        data-parsley-class-handler="#slWrapper2"
        data-parsley-errors-container="#slErrorContainer2" 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"` | To have a custom styled error message, make sure you wrapped the input wit this class. See code above for reference.