How to create a Bootstrap Form Wizard with Validation

Breaking down a large form into a wizard of multiple simpler steps is always a wise idea. By doing so, you are enabling gradual-user-engagement.

In this tutorial, you will learn

  • How to create a bootstrap form wizard.
  • How to apply JavaScript validation to each step of the form wizard.

I am gonna use the JQuery Bootstrap Wizard plugin by Vincent Gabriel. You can find Vincent’s plugin here on github. The plugin uses bootstrap’s tab component to create the bootstrap wizard UI. You can download the complete source code linked at the end of this tutorial.

VIEW DEMO

<div id="rootwizard">
	<!--navbar starts -->
	<div class="navbar">
		<div class="navbar-inner">
			<div class="container">
				<ul>
					<li><a href="#tab1" data-toggle="tab">Personal Details</a></li>
					<li><a href="#tab2" data-toggle="tab">Basic Details</a></li>
					<li><a href="#tab3" data-toggle="tab">Address</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!--navbar ends -->


	<!-- form wizard content starts -->
	<div class="tab-content">
		<!-- wizard step 1 starts-->
		<div class="tab-pane" id="tab1">
			<!-- progress bar for step1 starts -->
			<div class="progress">
				<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
					0%
				</div>
			</div>						
			<!-- progress bar for step1 ends -->

			<div class="form-group">
				<label for="name">Name</label>
				<input type="text" class="form-control" id="name">
			</div>
			<div class="form-group">
				<label for="pwd">Email</label>
				<input type="text" class="form-control" id="email">
			</div>
		</div>
		<!-- wizard step 1 ends-->

		<div class="tab-pane" id="tab2">
			<div class="progress">
				<div class="progress-bar" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;">
					33%
				</div>
			</div>						

			<div class="form-group">
				<label for="gender">Gender</label>
				<br/>
				<div class="btn-group" data-toggle="buttons">
					<label class="btn btn-default **active**">
						<input type="radio" name="gender" class="gender_radio" value="Male">
						Male 
					</label>
					<label class="btn btn-default">
						<input type="radio" name="gender" class="gender_radio" value="Female">
						Female
					</label>
				</div>
			</div>
			<br>

			<div class="form-group">
				<label for="age"> Age </label>

				<select class="form-control" name="age" id="age_select">
					<option>16</option>
					<option>17</option>		
					<option>18</option>
					<option>19</option>
					<option>20</option>
					<option>21</option>
					<option>22</option>
					<option>23</option>
					<option>24</option>
					<option>25</option>
					<option>26</option>
					<option>27</option>
					<option>28</option>
					<option>29</option>
					<option>30</option>
					<option>31</option>
					<option>32</option>
					<option>33</option>
					<option>34</option>
					<option>35</option>
					<option>36</option>
					<option>37</option>
					<option>38</option>
					<option>39</option>
					<option>40</option>																												
				</select>
			</div>
			<br/>


		</div>
		<div class="tab-pane" id="tab3">
			<div class="progress">
				<div class="progress-bar" role="progressbar" aria-valuenow="66" aria-valuemin="" aria-valuemax="100" style="width: 66%;">
					66%
				</div>
			</div>						

			<div class="form-group">
				<label for="address">Address</label>
				<textarea class="form-control" id="address"></textarea>
			</div>
		</div>
		<ul class="pager wizard">
			<li class="previous first" style="display:none;"><a href="#">First</a></li>
			<li class="previous"><a href="#">Previous</a></li>
			<li class="next last" style="display:none;"><a href="#">Last</a></li>
			<li class="next"><a href="#">Next</a></li>
		</ul>
	</div>	
</div>
	<!-- form wizard content ends -->

How to create a bootstrap form wizard

  1.  I am creating a div with id=rootwizard. This is the div to which the bootstrapWizard() method will be bound.
  2. This div has two basic segments. A navbar div and the tab content div. If you want to place the navbar at the bottom of the form, you can move navbar div below the .tab-content div. I like it above the form elements. The tab-content div, which contain all three tab divs – which will be used as each wizard steps in the form wizard.

Creating Navigation bar

You can create an unordered list containing the step names. Make sure you list the step names in the same order it is going to appear in the wizard. Bootstrap Wizard will create a step for each item you specify in the list. Content for each of the tab can be created in the tab content div later. Each item in the list becomes a clickable tab button. The href attribute in the anchor list item specifies the ID of the tab content div to be opened on click.

 

Creating step contents

Tab content div holds the content (or form elements) for each step in the Bootstrap form Wizard. Make sure that the tab-content divs use the same IDs as it was referenced from the navbar buttons. I have used tab1, tab2 and tab3 as tab IDs.

Creating “Next” and “Previous” Buttons

The “Next” and “Previous” buttons are used to navigate between steps.  You can create this as follows

<ul class="pager wizard">
			<li class="previous first" style="display:none;"><a href="#">First</a></li>
			<li class="previous"><a href="#">Previous</a></li>
			<li class="next last" style="display:none;"><a href="#">Last</a></li>
			<li class="next"><a href="#">Next</a></li>
		</ul>

When you are in the last step of the wizard, the next button has to be disabled and “Last” button has to be shown. Similarly, the “Previous” button has to be disabled on reaching the first step while navigating back in the wizard. You can specify the labels for these buttons here.

 

Binding bootstrapWizard() method to div#rootwizard element

Until now, it’s only plain HTML markup. Let’s bind bootstrapWizard method to the div#rootwizard to make it really a Form Wizard.

<script type="text/javascript">
	$(document).ready(function() {
		$('#rootwizard').bootstrapWizard();
	});
</script>

Make sure you include Jquery, Bootstrap JS and Bootstrap Wizard JS before binding.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js"></script>

 

Validating the Wizard with Javascript

Usually, HTML forms are validated when Submit button is clicked or onBlur event on the respective fields. But a Wizard has to be validated each time the “Next” button is clicked. I used the index value of the callback function in the bootstrapWizard method to identify which step is the user is trying fill. For example if the first step’s next button is clicked, the index value will be 1.  If the second step’s next button is clicked, the index value will be 2 and so on. 

I checked for the index and validated all the form fields in that particular step. If all the fields are valid, the I returned a “true” to the onNext property. If one are more inputs are found invalid, I have printed the errors in an alert box and returned a “false” to the onNext property which will prevent the wizard from advancing to the next step.

 

<script type="text/javascript">
	$(document).ready(function() {
		$('#rootwizard').bootstrapWizard(
			{onNext: function(tab, navigation, index) {
				var error_message = '';
				var error_count = 0;
				if(index==1) {

					if(!$('#name').val()) {
						error_message = 'Please enter Name.\n';
						error_count++;
					}

					if(!$('#email').val()) {
						error_message = error_message + 'Please enter an Email.\n';
						error_count++	
					}

					if($('#email').val() != false) {
						if(!is_valid_email($('#email').val())) {
							error_message = error_message + 'Email ID entered is invalid.\n';
							error_count++;
						}
						else {

						}
					}
					if(error_count > 0) {
						alert(error_message);
						return false;
					}
					else {
						return true;
					}

				}
				else if(index == 2) {
									//checking if a gender is chosen
									var value = $("input[type='radio'][name='gender']:checked").val();
									if(value === undefined) {
										error_message = 'Please select a gender.\n';
										error_count++;
									}
									//checking if address is valid
									if($('#age_select').val() < 18) {
										error_message = error_message + 'You must be 18 or older to register.';
										error_count++;
									}
									if(error_count > 0) {
										alert(error_message);
										return false;
									}
									else {
										return true;
									}


								}
								else if(index == 3) {
							//check the character length of address to validate
							if(($('#address').val().length) < 10) {
								alert('Address can\'t be less than 10 characters.');
								return false;
							}


						}
					}
				});
});



function is_valid_email(email) {
	var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
	return re.test(email);
}
</script>

 

Applying various validations

I have written all the validations by myself without using any JS validation library like ParsleyJS. This gives you the flexibility to implement and freedom to specifically validate required fields in each step. Also, I have tried to cover various types of validation like email validation, required field validation, radio button validation, value based validation (try selecting an age value less than 18 and hit next to see it), length based validation (the address text area will not accept any value less than 10 characters. Try it.).

You can also use ParsleyJS or JQuery Validation. Also, make sure you validate all the submitted values with your server side script too. Javascript validation alone is not complete reliable. Because the client-side Javascript validation won’t work if Javascript is turned off on the client’s browser.

One Response

  1. Matthias June 13, 2016

Leave a Reply