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 Parsley Documentation for a full list of instructions and other options.
This is a demo of a required field that must not leave empty.
<form action="form-validation.html" data-parsley-validate>
<div class="wd-300">
<div class="d-md-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-md-l-20 mg-t-20 mg-md-t-0">
<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 pd-x-20">Validate Form</button>
</div>
</form>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="" novalidate="">
<div class="d-sm-flex wd-sm-60p">
<div class="form-group mg-b-0">
<label>Email: <span class="tx-danger">*</span></label>
<input type="email" name="email" class="form-control wd-150 wd-xs-250" placeholder="Enter email" required="">
</div><!-- form-group -->
<div class="mg-sm-l-10 mg-t-10 mg-sm-t-25 pd-t-4">
<button type="submit" class="btn btn-primary pd-x-20">Validate Email</button>
</div>
</div>
</form>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="mg-b-10">What is your favorite browser? <span class="tx-danger">*</span></p>
<div id="cbWrapper" class="parsley-checkbox">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" name="browser[]" value="1" data-parsley-mincheck="2" data-parsley-class-handler="#cbWrapper" data-parsley-errors-container="#cbErrorContainer" required="" data-parsley-multiple="browser" id="b1">
<label class="custom-control-label" for="b1">Firefox</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" name="browser[]" value="2" data-parsley-multiple="browser" id="b2">
<label class="custom-control-label" for="b2">Chrome</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" name="browser[]" value="3" data-parsley-multiple="browser" id="b3">
<label class="custom-control-label" for="b3">Safari</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" name="browser[]" value="4" data-parsley-multiple="browser" id="b4">
<label class="custom-control-label" for="b4">Edge</label>
</div>
</div><!-- parsley-checkbox -->
<div id="cbErrorContainer"></div>
<div class="mg-t-20">
<button type="submit" class="btn btn-primary pd-x-20" value="5">Validate Form</button>
</div>
</form>A demo of select boxes that must be selected at least one fom any given option.
<form action="form-validation.html" data-parsley-validate>
<div class="d-md-flex">
<div class="parsley-select wd-250">
<select class="custom-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 class="mg-md-l-10 mg-t-10 mg-md-t-0">
<button type="submit" class="btn btn-primary pd-x-20" value="5">Validate Form</button>
</div>
</div>
</form>A demo for using custom styled messages for error container.
<form class="parsley-style-1" data-parsley-validate novalidate>
...
</form>