Bootstrap DatePicker Re-validation


Formvalidation is a really handy framework for client side form field validations (including inputs using a date picker) and integrates nicely with popular front-end frameworks such as BootStrap, Foundation, SemantUI, Pure and UIKit. If you’re struggling with re-validating a datepicker after the value changes, then here’s a quick note on how to ensure that date value is re-validated.

Here are the steps for setting a client side form which use BootStrap, Formvalidation to validate and re-validate a datepicker. Please note that BootStrap also needs jQuery:

  1. Setup the form skeleton
  2. Link to the required stylesheets use by BootStrap, jQuery and Formvalidation
  3. Link to the JavaScript files for jQuery, BootStrap and Formvalidation
  4. Create a simple BootStrap form
  5. Add BootStrap DatePicker validation using the Formvalidation framework
  6. Add BootStrap DatePicker re-validation

Setup the form skeleton

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>BootStrap DatePicker Re-validation</title>
</head>
<body>

</body>
</html>

Link the required stylesheets use by BootStrap, jQuery and Formvalidation

Underneath the title tag, add the following to link to the required stylesheets for BootStrap, Formvalidation and BootStrap DatePicker frameworks. The head section should now look like this after adding links to the stylesheets:

<head>
    <meta charset="utf-8">
    <title>BootStrap Datepicker Re-validation</title>
    <link href="/path/to/bootstrap.min.css" rel="stylesheet" type="text/css" >
    <link href="/path/to/formValidation.min.css" rel="stylesheet">
    <link href="/path/to/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="/path/to/bootstrap-datepicker3.min.css" rel="stylesheet">
</head>

Link to the JavaScript files for jQuery, BootStrap, DatePicker and Formvalidation

Under the h1 tag, add the required JavaScript files for the jQuery, BootStrap, Formvalidation (including the BootStrap js file in the frameworks folder of Formvalidation), and BootStrap DatePicker. jQuery is a required framework for BootStrap. You should now have this:

<body>
    <h1>BootStrap DatePicker re-validation</h1>
    <script src="/path/to/jquery.min.js"></script>
    <script src="/path/to/bootstrap.min.js"></script>    
    <script src="/path/to/formValidation.min.js"></script>
    <script src="/path/to/formvalidation/framework/bootstrap.min.js"></script>
    <script src="/path/to/bootstrap-datepicker.min.js"></script>

Create a simple BootStrap form

After the final script tag, add the form and its elements. We will just create a simple form with three input fields – first name, last name and date of birth (dob). Here’s the completed form using BootStrap:

<body>
    <h1>BootStrap DatePicker re-validation</h1>
    <script src="/path/to/jquery.min.js"></script>
    <script src="/path/to/bootstrap.min.js"></script>    
    <script src="/path/to/formValidation.min.js"></script>
    <script src="/path/to/formvalidation/framework/bootstrap.min.js"></script>
    <script src="/path/to/bootstrap-datepicker.min.js"></script>
    <form class="form-horizontal" role="form" id="frmClientEdit" method="post" action="">
       <div class="form-group required">
	   <label for="firstname" class="col-md-3 control-label">First Name</label>
           <div class="col-md-3">                            
	      <input type="text" name="firstname" class="form-control">
	   </div>
	</div>
        <div class="form-group required">
	   <label for="lastname" class="col-md-3 control-label">Last Name</label>
           <div class="col-md-3">                            
	      <input type="text" name="lastname" class="form-control">
	   </div>
	</div>
        <div class="form-group required">
	   <label for="dob" class="col-md-3 control-label">DOB</label>
           <div class="col-md-2 date">
              <div class="input-group input-append date" id="dpDOB">
		   <input type="text" class="form-control" name="dob" placeholder="dd/mm/yyyy"/>
		   <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
	      </div>
	   </div>
	</div>
        <div class="form-group">
           <div class="col-md-3 col-md-offset-3">
		<button type="button" class="btn btn-default" onClick="location.href=''">Cancel</button>                        
		<button type="submit" class="btn btn-primary">Save</button>
	    </div>
	</div>
   </form>
</body>

Add BootStrap DatePicker validation using the Formvalidation framework

Just after the closing form tag, add the following to perform simple client side form validation (including the BootStrap DatePicker) using the Formvalidation framework:

<script>
$(document).ready(function() {			
  $('#frmClientEdit').formValidation({
    framework: 'bootstrap',	
    icon: {
	valid: 'glyphicon glyphicon-ok',
	invalid: 'glyphicon glyphicon-remove',
	validating: 'glyphicon glyphicon-refresh'
    },	
    fields: {								
	firstname: {
	   validators: {
	      notEmpty: {
	         message: 'First Name is required and cannot be empty'
	      }
	   }
	},//firstname
	lastname: {
	   validators: {
	      notEmpty: {
	         message: 'Last Name is required and cannot be empty'
	      }
	   }
	},//lastname		
	dob: {
	    validators: {
	       notEmpty: {
		  message: 'DOB is required and cannot be empty'
	       },
	       date: {
		  message: 'The value is not a valid date',
		  format: 'DD/MM/YYYY'
	       }
	    }
	},//dob						
    }//fields
  });			
});
</script>

Add BootStrap DatePicker re-validation

Just after the closing form tag, add the following (after $(document).ready(function() {) to perform a re-validation using the Formvalidation framework for the dob BootStrap DatePicker:

   $('#dpDOB').datepicker({
	format: 'dd/mm/yyyy'
   })
   .on('changeDate', function(e) {
   // Revalidate the date field
      $('#frmClientEdit').formValidation('revalidateField', 'dob');
   });

That’s all there is to it. Remember, if you don’t add this last snippet, then the DOB datepicker won’t re-validate the date value if you pick (or type in) a different date.

Here’s what you will see if you click the Save button without entering any input:

datepicker-revalidation-1a

Let’s fix validation feedback icon positions. To do so, create a css file called app.css, and add the following:

#frmClientEdit .form-control-feedback {
top: 0;
right: -15px;
}

Then in the form file, add the following in the head section after the last link definition so that the new style definition in app.css is applied to the form to adjust the validation feedback icon position:

<link href="app.css" rel="stylesheet">

You should now see that the icon are to right of the form elements, i.e.

datepicker-revalidation-1

Here are some more screenshots client side form validations using the Formvalidation, BootStrap, jQuery and BootStrap DatePicker frameworks:

datepicker-revalidation-2

datepicker-revalidation-3

datepicker-revalidation-4

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s