This template uses Parsley for form validation. Parsley is the ultimate javascript form validation library.
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-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. |
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-primary">Validate Email</button>
</div>
</div>
</form>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-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. |
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. |
A demo for using custom layout for validation.
A demo for using custom styled messages for error container.
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. |