Accordion Slider Style jQuery Form Wizard Plugin - Formalize
File Size: | 12.5 KB |
---|---|
Views Total: | 10278 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Formalize is a lightweight jQuery plugin which converts a large form into a multi-step wizard like a vertical accordion/slider.
How to use it:
1. Divide your large form up into separate sections using fieldset
element.
<form id="sectional"> <fieldset> <legend>Section One</legend> <div class="form-section"> <p class="form-help-text"> This section has a required field. If you leave it blank, it will throw an error and not let you proceed to the next section. </p> <div class="field required-field"> <label for="sectional-text-1">Text 1</label> <input name="text1" id="sectional-text-1" type="text" required> </div> <div class="field"> <label for="sectional-text-2">Text 2</label> <input name="text2" id="sectional-text-2" type="text"> </div> <div class="field"> <label for="sectional-text-3">Text 3</label> <input name="text3" id="sectional-text-3" type="text"> </div> <nav class="form-section-nav"> <span class="btn-std form-nav-next">Next</span> </nav> </div> </fieldset> <fieldset> <legend>Section Two</legend> <div class="form-section"> <div class="field"> <label for="sectional-text-4">Text 4</label> <input name="text4" id="sectional-text-4" type="text"> </div> <div class="field"> <label for="sectional-text-5">Text 5</label> <input name="text5" id="sectional-text-5" type="text"> </div> <div class="field"> <label for="sectional-text-6">Text 6</label> <input name="text6" id="sectional-text-6" type="text"> </div> <nav class="form-section-nav"> <span class="btn-secondary form-nav-prev">Prev</span> <span class="btn-std form-nav-next">Next</span> </nav> </div> </fieldset> <fieldset> <legend>Section Three</legend> <div class="form-section"> <div class="field"> <label for="sectional-text-7">Text 7</label> <input name="text7" id="sectional-text-7" type="text"> </div> <div class="field"> <label for="sectional-text-8">Text 8</label> <input name="text8" id="sectional-text-8" type="text"> </div> <div class="field"> <label for="sectional-text-9">Text 9</label> <input name="text9" id="sectional-text-9" type="text"> </div> <nav class="form-section-nav"> <span class="btn-secondary form-nav-prev">Prev</span> <span class="btn-std form-nav-next">Next</span> </nav> </div> </fieldset> <fieldset> <legend>Section Four</legend> <div class="form-section"> <div class="field"> <label for="sectional-text-10">Text 10</label> <input name="text10" id="sectional-text-10" type="text"> </div> <div class="field"> <label for="sectional-text-11">Text 11</label> <input name="text11" id="sectional-text-11" type="text"> </div> <div class="field"> <label for="sectional-text-12">Text 12</label> <input name="text12" id="sectional-text-12" type="text"> </div> <nav class="form-section-nav"> <span class="btn-secondary form-nav-prev">Prev</span> <button></button> <span>Submit</span> </nav> </div> </fieldset> </form>
2. Include jQuery library and the jQuery Formalize plugin at the bottom of the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/formalize.js" type="text/javascript"></script>
3. Setup the form wizard.
$(document).ready(function(){ $('#sectional').formalize({ timing: 300, nextCallBack: function(){ if (validateEmpty($('#sectional .open'))){ scrollToNewSection($('#sectional .open')); return true; }; return false; }, prevCallBack: function(){ return scrollToNewSection($('#sectional .open').prev()) } }); $('input').on('keyup change', function(){ $(this).closest($('.valid')).removeClass('valid'); }); function validateEmpty(section){ var errors = 0; section.find($('.required-field')).each(function(){ var $this = $(this), input = $this.find($('input')); if (input.val() === ""){ errors++; $this.addClass('field-error'); $this.append('\<div class="form-error-msg">This field is required!\</div>'); } }); if (errors > 0){ section.removeClass('valid'); return false; } section.find($('.field-error')).each(function(){ $(this).removeClass('field-error'); }); section.find($('.form-error-msg')).each(function(){ $(this).remove(); }); section.addClass('valid'); return true; } });
This awesome jQuery plugin is developed by vgpena. For more Advanced Usages, please check the demo page or visit the official website.