erikasf/Parsley - Examples | Multi steps form.markdown

## index.html
<body>
<form class="demo-form">
	<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-default pull-right">
    <span class="clearfix"></span>
  </div>

</form>
  <div class="form-section">
	  <div class = "page-header"></div>
    <label for="firstname">First Name:</label>
    <input type="text" class="form-control" name="firstname" required="">

    <label for="lastname">Last Name:</label>
    <input type="text" class="form-control" name="lastname" required="">
  </div>
 <div class="form-section">
	  <div class = "page-header">50% complete</div>
    <p id="eventDateTime">
		<label for ="date start">Event Starts
			<input type="date" class =" date start" />
			<input type="time" class="time start " />
		</label>
		to<br />
		<label for = "date end">Event Ends
			<input type="date" class="date end " />
			<input type="time" class="time end " />
		</label>
</p>
	</div>
	<div class = "form-section">
		 <div class = "page-header">75% complete</div>
    <label for="email">Event Contact Email:</label>
    <input type="email" class="form-control" name="email" required="">


	  <tr></tr>


      <div id="locationField">
      <input id="autocomplete" placeholder="Enter the
											events address"
             onFocus="geolocate()" type="text"required></input>

	  <tr></tr>

    <table id="address">
      <tr>
        <td class="label">Street address</td>
        <td class="slimField"><input class="field" id="street_number"
              disabled="true"></input></td>
        <td class="wideField" colspan="2"><input class="field" id="route"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3"><input class="field" id="locality"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">State</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1" disabled="true"></input></td>
        <td class="label">Zip code</td>
        <td class="wideField"><input class="field" id="postal_code"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3"><input class="field"
              id="country" disabled="true"></input></td>
      </tr>
    </table>


</form>
</div>
<div class = "form-section">
	<div class = "page-header">100% complete</div>
	<
    <script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
// [END region_geolocation]

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOiaxXqgeDsoFRCLduoTioRx4VIljTzEc&signed_in=true&libraries=places&callback=initAutocomplete"
        async defer></script>

  </body>

## Parsley - Examples | Multi steps form.markdown

      
    Raw
  

              Parsley - Examples | Multi steps form.markdown
            
          
    Parsley - Examples | Multi steps form

Where does this show???
A Pen by erika harvey on CodePen.
License.

  
## script.js
$(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() {
    if ($('.demo-form').parsley().validate({group: 'block-' + curIndex()}))
      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
});

//////////////////////geolocation//////////////
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
////////////////////////////EVENT DATE AND TIME/////////////////////


    // initialize input widgets


 // initialize input widgets
    // ptTimeSelect doesn't trigger change event by default

    $('#eventDateTime.date').pikaday();

    var TIMEFORMAT = 'h:mm a';
    var eventDateTimeEl = document.getElementById('eventDateTime');
    var eventDateTimepair = new Datepair(eventDateTimeEl, {
        parseTime: function(input){
            // use moment.js to parse time
            var m = moment(input.value, TIMEFORMAT);
            return m.toDate();
        },
        updateTime: function(input, dateObj){
            var m = moment(dateObj);
            input.value = m.format(TIMEFORMAT);
        },
        parseDate: function(input){
            var picker = $(input).data('pikaday');
            return picker.getDate();
        },
        updateDate: function(input, dateObj){
            var picker = $(input).data('pikaday');
            return picker.setDate(dateObj);
        }
    });

## scripts
<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/dist/parsley.js"></script>

## style.css
.form-section {
  padding-left: 15px;
  border-left: 2px solid #FF851B;
  display: none;
}
*{
	color:#191919;
}
.form-section.current {
  display: inherit;
	background-color: ;
	color: whitesmoke;
	font-size: 24px;
}
 #map {
        height: 100%;
      }
.btn-info, .btn-default {
  margin-top: 10px;
}
 #locationField, #controls {
        position: relative;
        width: 100%;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 200px;
		  text-align:justified;
        color: #191919;

      }
      #address {
		  margin-left: 30%;
		  padding-top: 4%;

		  margin-top: 5%;
        color:#eeddbb;
        width: 800px;
        padding-right: 2px;
      }
      #address td {
        font-size: 24pt;
		  text-align: right;
		  padding-bottom: 5%;
		  padding-top: 5%;
		  margin-top: 3%''

      }
      .field {
        width: 100%;
      }
      .slimField {
        width: 180px;
      }
      .wideField {
        width: 240px;
      }
      #locationField {
    margin-top: 5%;
        margin-bottom: 2px;
      }

## styles
<link href="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/doc/assets/docs.css" rel="stylesheet" />
<link href="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/src/parsley.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/css/pikaday.css" rel="stylesheet" />
	<body>
	<form class="demo-form">
	<div class="form-navigation">
	<button type="button" class="previous btn btn-info pull-left">< Previous</button>
	<button type="button" class="next btn btn-info pull-right">Next ></button>
	<input type="submit" class="btn btn-default pull-right">
	<span class="clearfix"></span>
	</div>

	</form>
	<div class="form-section">
	<div class = "page-header"></div>
	<label for="firstname">First Name:</label>
	<input type="text" class="form-control" name="firstname" required="">

	<label for="lastname">Last Name:</label>
	<input type="text" class="form-control" name="lastname" required="">
	</div>
	<div class="form-section">
	<div class = "page-header">50% complete</div>
	<p id="eventDateTime">
	<label for ="date start">Event Starts
	<input type="date" class =" date start" />
	<input type="time" class="time start " />
	</label>
	to<br />
	<label for = "date end">Event Ends
	<input type="date" class="date end " />
	<input type="time" class="time end " />
	</label>
	</p>
	</div>
	<div class = "form-section">
	<div class = "page-header">75% complete</div>
	<label for="email">Event Contact Email:</label>
	<input type="email" class="form-control" name="email" required="">





	<tr></tr>



	<div id="locationField">
	<input id="autocomplete" placeholder="Enter the
	events address"
	onFocus="geolocate()" type="text"required></input>

	<tr></tr>

	<table id="address">
	<tr>
	<td class="label">Street address</td>
	<td class="slimField"><input class="field" id="street_number"
	disabled="true"></input></td>
	<td class="wideField" colspan="2"><input class="field" id="route"
	disabled="true"></input></td>
	</tr>
	<tr>
	<td class="label">City</td>
	<td class="wideField" colspan="3"><input class="field" id="locality"
	disabled="true"></input></td>
	</tr>
	<tr>
	<td class="label">State</td>
	<td class="slimField"><input class="field"
	id="administrative_area_level_1" disabled="true"></input></td>
	<td class="label">Zip code</td>
	<td class="wideField"><input class="field" id="postal_code"
	disabled="true"></input></td>
	</tr>
	<tr>
	<td class="label">Country</td>
	<td class="wideField" colspan="3"><input class="field"
	id="country" disabled="true"></input></td>
	</tr>
	</table>


	</form>
	</div>
	<div class = "form-section">
	<div class = "page-header">100% complete</div>
	<
	<script>
	// This example displays an address form, using the autocomplete feature
	// of the Google Places API to help users fill in the information.

	// This example requires the Places library. Include the libraries=places
	// parameter when you first load the API. For example:
	// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

	var placeSearch, autocomplete;
	var componentForm = {
	street_number: 'short_name',
	route: 'long_name',
	locality: 'long_name',
	administrative_area_level_1: 'short_name',
	country: 'long_name',
	postal_code: 'short_name'
	};

	function initAutocomplete() {
	// Create the autocomplete object, restricting the search to geographical
	// location types.
	autocomplete = new google.maps.places.Autocomplete(
	/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
	{types: ['geocode']});

	// When the user selects an address from the dropdown, populate the address
	// fields in the form.
	autocomplete.addListener('place_changed', fillInAddress);
	}

	// [START region_fillform]
	function fillInAddress() {
	// Get the place details from the autocomplete object.
	var place = autocomplete.getPlace();

	for (var component in componentForm) {
	document.getElementById(component).value = '';
	document.getElementById(component).disabled = false;
	}

	// Get each component of the address from the place details
	// and fill the corresponding field on the form.
	for (var i = 0; i < place.address_components.length; i++) {
	var addressType = place.address_components[i].types[0];
	if (componentForm[addressType]) {
	var val = place.address_components[i][componentForm[addressType]];
	document.getElementById(addressType).value = val;
	}
	}
	}
	// [END region_fillform]

	// [START region_geolocation]
	// Bias the autocomplete object to the user's geographical location,
	// as supplied by the browser's 'navigator.geolocation' object.
	function geolocate() {
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	var geolocation = {
	lat: position.coords.latitude,
	lng: position.coords.longitude
	};
	var circle = new google.maps.Circle({
	center: geolocation,
	radius: position.coords.accuracy
	});
	autocomplete.setBounds(circle.getBounds());
	});
	}
	}
	// [END region_geolocation]

	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOiaxXqgeDsoFRCLduoTioRx4VIljTzEc&signed_in=true&libraries=places&callback=initAutocomplete"
	async defer></script>

	</body>
	$(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() {
	if ($('.demo-form').parsley().validate({group: 'block-' + curIndex()}))
	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
	});

	//////////////////////geolocation//////////////
	function geolocate() {
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	var geolocation = {
	lat: position.coords.latitude,
	lng: position.coords.longitude
	};
	var circle = new google.maps.Circle({
	center: geolocation,
	radius: position.coords.accuracy
	});
	autocomplete.setBounds(circle.getBounds());
	});
	}
	}
	var placeSearch, autocomplete;
	var componentForm = {
	street_number: 'short_name',
	route: 'long_name',
	locality: 'long_name',
	administrative_area_level_1: 'short_name',
	country: 'long_name',
	postal_code: 'short_name'
	};

	function initAutocomplete() {
	// Create the autocomplete object, restricting the search to geographical
	// location types.
	autocomplete = new google.maps.places.Autocomplete(
	/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
	{types: ['geocode']});

	// When the user selects an address from the dropdown, populate the address
	// fields in the form.
	autocomplete.addListener('place_changed', fillInAddress);
	}

	// [START region_fillform]
	function fillInAddress() {
	// Get the place details from the autocomplete object.
	var place = autocomplete.getPlace();

	for (var component in componentForm) {
	document.getElementById(component).value = '';
	document.getElementById(component).disabled = false;
	}

	// Get each component of the address from the place details
	// and fill the corresponding field on the form.
	for (var i = 0; i < place.address_components.length; i++) {
	var addressType = place.address_components[i].types[0];
	if (componentForm[addressType]) {
	var val = place.address_components[i][componentForm[addressType]];
	document.getElementById(addressType).value = val;
	}
	}
	}
	function geolocate() {
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	var geolocation = {
	lat: position.coords.latitude,
	lng: position.coords.longitude
	};
	var circle = new google.maps.Circle({
	center: geolocation,
	radius: position.coords.accuracy
	});
	autocomplete.setBounds(circle.getBounds());
	});
	}
	}
	////////////////////////////EVENT DATE AND TIME/////////////////////


	// initialize input widgets



	// initialize input widgets
	// ptTimeSelect doesn't trigger change event by default

	$('#eventDateTime.date').pikaday();

	var TIMEFORMAT = 'h:mm a';
	var eventDateTimeEl = document.getElementById('eventDateTime');
	var eventDateTimepair = new Datepair(eventDateTimeEl, {
	parseTime: function(input){
	// use moment.js to parse time
	var m = moment(input.value, TIMEFORMAT);
	return m.toDate();
	},
	updateTime: function(input, dateObj){
	var m = moment(dateObj);
	input.value = m.format(TIMEFORMAT);
	},
	parseDate: function(input){
	var picker = $(input).data('pikaday');
	return picker.getDate();
	},
	updateDate: function(input, dateObj){
	var picker = $(input).data('pikaday');
	return picker.setDate(dateObj);
	}
	});
	<script src="//code.jquery.com/jquery-2.1.3.js"></script>
	<script src="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/dist/parsley.js"></script>
	.form-section {
	padding-left: 15px;
	border-left: 2px solid #FF851B;
	display: none;
	}
	*{
	color:#191919;
	}
	.form-section.current {
	display: inherit;
	background-color: ;
	color: whitesmoke;
	font-size: 24px;
	}
	#map {
	height: 100%;
	}
	.btn-info, .btn-default {
	margin-top: 10px;
	}
	#locationField, #controls {
	position: relative;
	width: 100%;
	}
	#autocomplete {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 99%;
	}
	.label {
	text-align: right;
	font-weight: bold;
	width: 200px;
	text-align:justified;
	color: #191919;

	}
	#address {
	margin-left: 30%;
	padding-top: 4%;

	margin-top: 5%;
	color:#eeddbb;
	width: 800px;
	padding-right: 2px;
	}
	#address td {
	font-size: 24pt;
	text-align: right;
	padding-bottom: 5%;
	padding-top: 5%;
	margin-top: 3%''

	}
	.field {
	width: 100%;
	}
	.slimField {
	width: 180px;
	}
	.wideField {
	width: 240px;
	}
	#locationField {
	margin-top: 5%;
	margin-bottom: 2px;
	}
	<link href="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
	<link href="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/doc/assets/docs.css" rel="stylesheet" />
	<link href="https://rawgit.com/guillaumepotier/Parsley.js/2.3.3/src/parsley.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/css/pikaday.css" rel="stylesheet" />