Required Input Validation

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

Firstname: *

Lastname: *

Validate Form

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>

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

Validate 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? *

Firefox Chrome Safari Edge

Validate Form

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>

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.

Firefox Chrome Safari Opera Internet Explorer

Validate Form

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>

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

Validate Form

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

Firefox Chrome Safari Opera Internet Explorer

Validate Form

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