Skip to content

Instantly share code, notes, and snippets.

@erikasf

erikasf/Parsley - Examples | Multi steps form.markdown

Last active January 26, 2021 15:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save erikasf/5a4fc7bb0a586a4f841a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save erikasf/5a4fc7bb0a586a4f841a to your computer and use it in GitHub Desktop.
Download ZIP
Parsley - Examples | Multi steps form
Raw
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>
Raw
Parsley - Examples | Multi steps form.markdown
Raw
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);
}
});
Raw
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>
Raw
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;
}
Raw
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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment