How To Create Multi Step Form in jQuery
Hello,
Right now, i we’ll present you the best way to create multi step type in jQuery. This text will provide you with easy instance of the best way to create multi step type in jQuery. you’ll discover ways to create multi step type in jQuery.
So let’s comply with few step to create instance of the best way to create multi step type in jQuery.
index.html
<!DOCTYPE html><html><head><title>How To Create Multi Step Type in jQuery</title><hyperlink rel="stylesheet" sort="textual content/css" href="fashion.css"><script src="https://code.jquery.com/jquery-3.4.1.js"></script><script src="https://cdn.jsdelivr.internet/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script><script src="customized.js"></script></head><physique fashion="background-color: #f6f6f6;"><h1 fashion="margin-top:50px; coloration: #333;">How To Create Multi Step Type in jQuery</h1><type id="myForm" motion="#" methodology="POST"><h1>Registration Type</h1><!-- One "tab" for every step within the type: --><div class="tab">Identify:<p><enter placeholder="First identify" identify="fname"></p><p><enter placeholder="Final identify" identify="lname"></p></div><div class="tab">Contact Data:<p><enter placeholder="E-mail" identify="electronic mail"></p><p><enter placeholder="Telephone" identify="telephone"></p></div><div class="tab">Birthday:<p><enter placeholder="dd" identify="date"></p><p><enter placeholder="mm" identify="month"></p><p><enter placeholder="yyyy" identify="yr"></p></div><div class="tab">Login Data:<p><enter placeholder="Username" identify="username"></p><p><enter placeholder="Password" identify="password" sort="password"></p></div><div fashion="overflow:auto;"><div fashion="float:proper; margin-top: 5px;"><button sort="button" class="earlier">Earlier</button><button sort="button" class="subsequent">Subsequent</button><button sort="button" class="submit">Submit</button></div></div><!-- Circles which signifies the steps of the shape: --><div fashion="text-align:heart;margin-top:40px;"><span class="step">1</span><span class="step">2</span><span class="step">3</span><span class="step">4</span></div></type></physique><script sort="textual content/javascript">$(doc).prepared(perform(){$.validator.addMethod('date', perform(worth, aspect, param) {return (worth != 0) && (worth <= 31) && (worth == parseInt(worth, 10));}, 'Please enter a legitimate date!');$.validator.addMethod('month', perform(worth, aspect, param) {return (worth != 0) && (worth <= 12) && (worth == parseInt(worth, 10));}, 'Please enter a legitimate month!');$.validator.addMethod('yr', perform(worth, aspect, param) {return (worth != 0) && (worth >= 1900) && (worth == parseInt(worth, 10));}, 'Please enter a legitimate yr not lower than 1900!');$.validator.addMethod('username', perform(worth, aspect, param) {var nameRegex = /^[a-zA-Z0-9]+$/;return worth.match(nameRegex);}, 'Solely a-z, A-Z, 0-9 characters are allowed');var val = {// Specify validation guidelinesguidelines: {fname: "required",electronic mail: {required: true,electronic mail: true},telephone: {required:true,minlength:10,maxlength:10,digits:true},date:{date:true,required:true,minlength:2,maxlength:2,digits:true},month:{month:true,required:true,minlength:2,maxlength:2,digits:true},yr:{yr:true,required:true,minlength:4,maxlength:4,digits:true},username:{username:true,required:true,minlength:4,maxlength:16,},password:{required:true,minlength:8,maxlength:16,}},// Specify validation error messagesmessages: {fname: "First identify is required",electronic mail: {required: "Electronic mail is required",electronic mail: "Please enter a legitimate e-mail",},telephone:{required: "Telephone quantity is requied",minlength: "Please enter 10 digit cell quantity",maxlength: "Please enter 10 digit cell quantity",digits: "Solely numbers are allowed on this subject"},date:{required: "Date is required",minlength: "Date needs to be a 2 digit quantity, e.i., 01 or 20",maxlength: "Date needs to be a 2 digit quantity, e.i., 01 or 20",digits: "Date needs to be a quantity"},month:{required: "Month is required",minlength: "Month needs to be a 2 digit quantity, e.i., 01 or 12",maxlength: "Month needs to be a 2 digit quantity, e.i., 01 or 12",digits: "Solely numbers are allowed on this subject"},yr:{required: "Yr is required",minlength: "Yr needs to be a Four digit quantity, e.i., 2018 or 1990",maxlength: "Yr needs to be a Four digit quantity, e.i., 2018 or 1990",digits: "Solely numbers are allowed on this subject"},username:{required: "Username is required",minlength: "Username needs to be minimal Four characters",maxlength: "Username needs to be most 16 characters",},password:{required: "Password is required",minlength: "Password needs to be minimal Eight characters",maxlength: "Password needs to be most 16 characters",}}}$("#myForm").multiStepForm({// defaultStep:0,beforeSubmit : perform(type, submit){console.log("referred to as earlier than submiting the shape");console.log(type);console.log(submit);},validations:val,}).navigateTo(0);});</script></html>fashion.css
<fashion>* {box-sizing: border-box;}.tab{show: none;width: 100%;peak: 50%;margin: 0px auto;}.present{show: block;}physique {background-color: #f1f1f1;}type {background-color: #ffffff;margin: Zero auto;font-family: Raleway;padding: 40px;width: 40%;min-width: 300px;}h1 {text-align: heart;}enter {padding: 10px;width: 100%;font-size: 17px;font-family: Raleway;border: 1px strong #aaaaaa;}button {background-color: #4CAF50;coloration: #ffffff;border: none;padding: 10px 20px;font-size: 17px;font-family: Raleway;cursor: pointer;}button:hover {opacity: 0.8;}.earlier {background-color: #bbbbbb;}/* type: */.step {peak: 30px;width: 30px;cursor: pointer;margin: Zero 2px;coloration: #fff;background-color: #bbbbbb;border: none;border-radius: 50%;show: inline-block;opacity: 0.8;padding: 5px}.step.lively {opacity: 1;background-color: #69c769;}.step.end {background-color: #4CAF50;}.error {coloration: #f00;}</fashion>customized.js
<script>(perform ( $ ) {$.fn.multiStepForm = perform(args) {if(args === null || typeof args !== 'object' || $.isArray(args))throw " : Referred to as with Invalid argument";var type = this;var tabs = type.discover('.tab');var steps = type.discover('.step');steps.every(perform(i, e){$(e).on('click on', perform(ev){});});type.navigateTo = perform (i) {/*index*//*Mark the present part with the category 'present'*/tabs.removeClass('present').eq(i).addClass('present');// Present solely the navigation buttons that make sense for the present part:type.discover('.earlier').toggle(i > 0);atTheEnd = i >= tabs.size - 1;type.discover('.subsequent').toggle(!atTheEnd);// console.log('atTheEnd='+atTheEnd);type.discover('.submit').toggle(atTheEnd);fixStepIndicator(curIndex());return type;}perform curIndex() {/*Return the present index by which part has the category 'present'*/return tabs.index(tabs.filter('.present'));}perform fixStepIndicator(n) {steps.every(perform(i, e){i == n ? $(e).addClass('lively') : $(e).removeClass('lively');});}/* Earlier button is straightforward, simply return */type.discover('.earlier').click on(perform() {type.navigateTo(curIndex() - 1);});/* Subsequent button goes ahead iff present block validates */type.discover('.subsequent').click on(perform() {if('validations' in args && typeof args.validations === 'object' && !$.isArray(args.validations)){if(!('noValidate' in args) || (typeof args.noValidate === 'boolean' && !args.noValidate)){type.validate(args.validations);if(type.legitimate() == true){type.navigateTo(curIndex() + 1);return true;}return false;}}type.navigateTo(curIndex() + 1);});type.discover('.submit').on('click on', perform(e){if(typeof args.beforeSubmit !== 'undefined' && typeof args.beforeSubmit !== 'perform')args.beforeSubmit(type, this);/*examine if args.submit is about false if not then type.submit will not be gonna run, if not set then will run by default*/ if(typeof args.submit === 'undefined' || (typeof args.submit === 'boolean' && args.submit)){type.submit();}return type;});/*By default navigate to the tab 0, whether it is being set utilizing defaultStep property*/typeof args.defaultStep === 'quantity' ? type.navigateTo(args.defaultStep) : null;type.noValidate = perform() {}return type;};}( jQuery ));</script>I hope it is going to help you…
Komentar
Posting Komentar