first commit
This commit is contained in:
305
resources/js/auth/pages-auth-multisteps.js
Normal file
305
resources/js/auth/pages-auth-multisteps.js
Normal file
@ -0,0 +1,305 @@
|
||||
/**
|
||||
* 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('<div class="position-relative"></div>');
|
||||
$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 =
|
||||
'<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="28"/>';
|
||||
} 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;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
});
|
||||
Reference in New Issue
Block a user