/** * Page auth register multi-steps */ 'use strict'; // Select2 (jquery) $(function () { var select2 = $('.select2'); // select2 if (select2.length) { select2.each(function () { var $this = $(this); $this.wrap('
'); $this.select2({ placeholder: 'Select an country', dropdownParent: $this.parent() }); }); } }); // Multi Steps Validation // -------------------------------------------------------------------- document.addEventListener('DOMContentLoaded', function (e) { (function () { const stepsValidation = document.querySelector('#multiStepsValidation'); if (typeof stepsValidation !== undefined && stepsValidation !== null) { // Multi Steps form const stepsValidationForm = stepsValidation.querySelector('#multiStepsForm'); // Form steps const stepsValidationFormStep1 = stepsValidationForm.querySelector('#accountDetailsValidation'); const stepsValidationFormStep2 = stepsValidationForm.querySelector('#personalInfoValidation'); const stepsValidationFormStep3 = stepsValidationForm.querySelector('#billingLinksValidation'); // Multi steps next prev button const stepsValidationNext = [].slice.call(stepsValidationForm.querySelectorAll('.btn-next')); const stepsValidationPrev = [].slice.call(stepsValidationForm.querySelectorAll('.btn-prev')); const multiStepsExDate = document.querySelector('.multi-steps-exp-date'), multiStepsCvv = document.querySelector('.multi-steps-cvv'), multiStepsMobile = document.querySelector('.multi-steps-mobile'), multiStepsPincode = document.querySelector('.multi-steps-pincode'), multiStepsCard = document.querySelector('.multi-steps-card'); // Expiry Date Mask if (multiStepsExDate) { new Cleave(multiStepsExDate, { date: true, delimiter: '/', datePattern: ['m', 'y'] }); } // CVV if (multiStepsCvv) { new Cleave(multiStepsCvv, { numeral: true, numeralPositiveOnly: true }); } // Mobile if (multiStepsMobile) { new Cleave(multiStepsMobile, { phone: true, phoneRegionCode: 'US' }); } // Pincode if (multiStepsPincode) { new Cleave(multiStepsPincode, { delimiter: '', numeral: true }); } // Credit Card if (multiStepsCard) { new Cleave(multiStepsCard, { creditCard: true, onCreditCardTypeChanged: function (type) { if (type != '' && type != 'unknown') { document.querySelector('.card-type').innerHTML = ''; } else { document.querySelector('.card-type').innerHTML = ''; } } }); } let validationStepper = new Stepper(stepsValidation, { linear: true }); // Account details const multiSteps1 = FormValidation.formValidation(stepsValidationFormStep1, { fields: { multiStepsUsername: { validators: { notEmpty: { message: 'Please enter username' }, stringLength: { min: 6, max: 30, message: 'The name must be more than 6 and less than 30 characters long' }, regexp: { regexp: /^[a-zA-Z0-9 ]+$/, message: 'The name can only consist of alphabetical, number and space' } } }, multiStepsEmail: { validators: { notEmpty: { message: 'Please enter email address' }, emailAddress: { message: 'The value is not a valid email address' } } }, multiStepsPass: { validators: { notEmpty: { message: 'Please enter password' } } }, multiStepsConfirmPass: { validators: { notEmpty: { message: 'Confirm Password is required' }, identical: { compare: function () { return stepsValidationFormStep1.querySelector('[name="multiStepsPass"]').value; }, message: 'The password and its confirm are not the same' } } } }, plugins: { trigger: new FormValidation.plugins.Trigger(), bootstrap5: new FormValidation.plugins.Bootstrap5({ // Use this for enabling/changing valid/invalid class // eleInvalidClass: '', eleValidClass: '', rowSelector: '.col-sm-6' }), autoFocus: new FormValidation.plugins.AutoFocus(), submitButton: new FormValidation.plugins.SubmitButton() }, init: instance => { instance.on('plugins.message.placed', function (e) { if (e.element.parentElement.classList.contains('input-group')) { e.element.parentElement.insertAdjacentElement('afterend', e.messageElement); } }); } }).on('core.form.valid', function () { // Jump to the next step when all fields in the current step are valid validationStepper.next(); }); // Personal info const multiSteps2 = FormValidation.formValidation(stepsValidationFormStep2, { fields: { multiStepsFirstName: { validators: { notEmpty: { message: 'Please enter first name' } } }, multiStepsAddress: { validators: { notEmpty: { message: 'Please enter your address' } } } }, plugins: { trigger: new FormValidation.plugins.Trigger(), bootstrap5: new FormValidation.plugins.Bootstrap5({ // Use this for enabling/changing valid/invalid class // eleInvalidClass: '', eleValidClass: '', rowSelector: function (field, ele) { // field is the field name // ele is the field element switch (field) { case 'multiStepsFirstName': return '.col-sm-6'; case 'multiStepsAddress': return '.col-md-12'; default: return '.row'; } } }), autoFocus: new FormValidation.plugins.AutoFocus(), submitButton: new FormValidation.plugins.SubmitButton() } }).on('core.form.valid', function () { // Jump to the next step when all fields in the current step are valid validationStepper.next(); }); // Social links const multiSteps3 = FormValidation.formValidation(stepsValidationFormStep3, { fields: { multiStepsCard: { validators: { notEmpty: { message: 'Please enter card number' } } } }, plugins: { trigger: new FormValidation.plugins.Trigger(), bootstrap5: new FormValidation.plugins.Bootstrap5({ // Use this for enabling/changing valid/invalid class // eleInvalidClass: '', eleValidClass: '', rowSelector: function (field, ele) { // field is the field name // ele is the field element switch (field) { case 'multiStepsCard': return '.col-md-12'; default: return '.col-dm-6'; } } }), autoFocus: new FormValidation.plugins.AutoFocus(), submitButton: new FormValidation.plugins.SubmitButton() }, init: instance => { instance.on('plugins.message.placed', function (e) { if (e.element.parentElement.classList.contains('input-group')) { e.element.parentElement.insertAdjacentElement('afterend', e.messageElement); } }); } }).on('core.form.valid', function () { // You can submit the form // stepsValidationForm.submit() // or send the form data to server via an Ajax request // To make the demo simple, I just placed an alert alert('Submitted..!!'); }); stepsValidationNext.forEach(item => { item.addEventListener('click', event => { // When click the Next button, we will validate the current step switch (validationStepper._currentIndex) { case 0: multiSteps1.validate(); break; case 1: multiSteps2.validate(); break; case 2: multiSteps3.validate(); break; default: break; } }); }); stepsValidationPrev.forEach(item => { item.addEventListener('click', event => { switch (validationStepper._currentIndex) { case 2: validationStepper.previous(); break; case 1: validationStepper.previous(); break; case 0: default: break; } }); }); } })(); });