Forms Validation

  1. Home
  2. Forms
  3. Forms Validation
Form validaton

A simple demo form that uses most of supported Parsley elements to show how to bind, configure and validate them properly.

<form action="#" data-parsley-validate="" novalidate=""> <div class="form-group"> <label for="userName">User Name:<span class="text-danger">*</span></label> <input type="text" name="nick" data-parsley-trigger="change" required="" placeholder="Enter user name" class="form-control" id="userName" /> </div> <div class="form-group"> <label for="emailAddress">Email address:<span class="text-danger">*</span></label> <input type="email" name="email" data-parsley-trigger="change" required="" placeholder="Enter email" class="form-control" id="emailAddress" /> </div> <div class="form-group"> <label for="pass1">Password:<span class="text-danger">*</span></label> <input id="pass1" type="password" placeholder="Password" required="" class="form-control" /> </div> <div class="form-group"> <label for="passWord2">Confirm Password: <span class="text-danger">*</span></label> <input data-parsley-equalto="#pass1" type="password" required="" placeholder="Password" class="form-control" id="passWord2" /> </div> <div class="form-group"> <label>URL:</label> <div> <input data-parsley-type="url" type="url" class="form-control" required="" placeholder="URL" /> </div> </div> <div class="form-group"> <label>Number:</label> <div> <input data-parsley-type="number" type="text" class="form-control" required="" placeholder="Enter only numbers" /> </div> </div> <div class="form-group"> <label>Patient Comments:</label> <div> <textarea required="" class="form-control"></textarea> </div> </div> <div class="form-group text-right m-b-0"> <button class="btn btn-primary" type="submit"> Submit </button> <button type="reset" class="btn btn-tertiary m-l-5"> Cancel </button> </div> </form>
Multi-step form validation

Occassionally it may be necessary to split long, complex forms into multiple steps. Parsley "groups" easily validate multi-step forms.



<form class="demo-form" action="#"> <div class="form-section"> <label for="firstname">First Name:</label> <input type="text" class="form-control mb-2" name="firstname" id="firstname" required="" /> <label for="lastname">Last Name:</label> <input type="text" class="form-control" name="lastname" id="lastname" required="" /> </div> <div class="form-section"> <label for="email">Email:</label> <input type="email" class="form-control" name="email" id="email" required="" /> </div> <div class="form-section"> <label for="color">Favorite color:</label> <input type="text" class="mb-2 form-control" name="color" id="color" required="" /> </div> <br /><br /> <div class="form-navigation"> <button type="button" class="previous btn btn-info pull-left">&lt; Previous</button> <button type="button" class="next btn btn-info pull-right">Next &gt;</button> <input type="submit" class="btn btn-primary pull-right" /> <span class="clearfix"></span> </div> </form> <script>$(function () { var $sections = $('.form-section'); function navigateTo(index) { // Mark the current section with the class 'current' $sections .removeClass('current') .eq(index) .addClass('current'); // Show only the navigation buttons that make sense for the current section: $('.form-navigation .previous').toggle(index > 0); var atTheEnd = index >= $sections.length - 1; $('.form-navigation .next').toggle(!atTheEnd); $('.form-navigation [type=submit]').toggle(atTheEnd); } function curIndex() { // Return the current index by looking at which section has the class 'current' return $sections.index($sections.filter('.current')); } // Previous button is easy, just go back $('.form-navigation .previous').click(function() { navigateTo(curIndex() - 1); }); // Next button goes forward iff current block validates $('.form-navigation .next').click(function() { $('.demo-form').parsley().whenValidate({ group: 'block-' + curIndex() }).done(function() { navigateTo(curIndex() + 1); }); }); // Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc. $sections.each(function(index, section) { $(section).find(':input').attr('data-parsley-group', 'block-' + index); }); navigateTo(0); // Start at the beginning }); //# sourceURL=pen.js </script>