Create multi step form with validations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Step Form with Parsley.js Validation</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Parsley.js CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/parsleyjs@2.9.2/src/parsley.min.css">
<style>
.form-section {
padding-left: 15px;
border-left: 2px solid #FF851B;
display: none;
}
.form-section.current {
display: inherit;
}
.btn-info, .btn-default {
margin-top: 10px;
}
html.codepen body {
margin: 1em;
}
</style>
</head>
<body>
<div class="container mt-5">
<form class="demo-form">
<div class="form-section">
<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">
<label for="email">11Email11:</label>
<input type="email" class="form-control" name="email" required="">
</div>
<div class="form-section">
<label for="email">Email:</label>
<input type="email" class="form-control" name="email" required="">
</div>
<div class="form-section">
<label for="color">Favorite color:</label>
<input type="text" class="form-control" name="color" required="">
</div>
<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>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<!-- Parsley.js JS -->
<script src="https://cdn.jsdelivr.net/npm/parsleyjs@2.9.2/dist/parsley.min.js"></script>
<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() {
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
});
</script>
</body>
</html>
No comments:
Post a Comment