Server IP : 150.95.80.236 / Your IP : 3.133.119.157 Web Server : Apache System : Linux host-150-95-80-236 3.10.0-1160.105.1.el7.x86_64 #1 SMP Thu Dec 7 15:39:45 UTC 2023 x86_64 User : social-telecare ( 10000) PHP Version : 7.4.33 Disable Function : opcache_get_status MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/vhosts/pcu.in.th/sc.pcu.in.th/demo15/src/js/custom/modals/ |
Upload File : |
"use strict"; // Class definition var KTCreateAccount = function () { // Elements var modal; var modalEl; var stepper; var form; var formSubmitButton; var formContinueButton; // Variables var stepperObj; var validations = []; // Private Functions var initStepper = function () { // Initialize Stepper stepperObj = new KTStepper(stepper); // Stepper change event stepperObj.on('kt.stepper.changed', function (stepper) { if (stepperObj.getCurrentStepIndex() === 4) { formSubmitButton.classList.remove('d-none'); formSubmitButton.classList.add('d-inline-block'); formContinueButton.classList.add('d-none'); } else if (stepperObj.getCurrentStepIndex() === 5) { formSubmitButton.classList.add('d-none'); formContinueButton.classList.add('d-none'); } else { formSubmitButton.classList.remove('d-inline-block'); formSubmitButton.classList.remove('d-none'); formContinueButton.classList.remove('d-none'); } }); // Validation before going to next page stepperObj.on('kt.stepper.next', function (stepper) { console.log('stepper.next'); // Validate form before change stepper step var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for currnt step if (validator) { validator.validate().then(function (status) { console.log('validated!'); if (status == 'Valid') { stepper.goNext(); KTUtil.scrollTop(); } else { Swal.fire({ text: "Sorry, looks like there are some errors detected, please try again.", icon: "error", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-light" } }).then(function () { KTUtil.scrollTop(); }); } }); } else { stepper.goNext(); KTUtil.scrollTop(); } }); // Prev event stepperObj.on('kt.stepper.previous', function (stepper) { console.log('stepper.previous'); stepper.goPrevious(); KTUtil.scrollTop(); }); } var handleForm = function() { formSubmitButton.addEventListener('click', function (e) { // Validate form before change stepper step var validator = validations[3]; // get validator for last form validator.validate().then(function (status) { console.log('validated!'); if (status == 'Valid') { // Prevent default button action e.preventDefault(); // Disable button to avoid multiple click formSubmitButton.disabled = true; // Show loading indication formSubmitButton.setAttribute('data-kt-indicator', 'on'); // Simulate form submission setTimeout(function() { // Hide loading indication formSubmitButton.removeAttribute('data-kt-indicator'); // Enable button formSubmitButton.disabled = false; stepperObj.goNext(); //KTUtil.scrollTop(); }, 2000); } else { Swal.fire({ text: "Sorry, looks like there are some errors detected, please try again.", icon: "error", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-light" } }).then(function () { KTUtil.scrollTop(); }); } }); }); // Expiry month. For more info, plase visit the official plugin site: https://select2.org/ $(form.querySelector('[name="card_expiry_month"]')).on('change', function() { // Revalidate the field when an option is chosen validations[3].revalidateField('card_expiry_month'); }); // Expiry year. For more info, plase visit the official plugin site: https://select2.org/ $(form.querySelector('[name="card_expiry_year"]')).on('change', function() { // Revalidate the field when an option is chosen validations[3].revalidateField('card_expiry_year'); }); // Expiry year. For more info, plase visit the official plugin site: https://select2.org/ $(form.querySelector('[name="business_type"]')).on('change', function() { // Revalidate the field when an option is chosen validations[2].revalidateField('business_type'); }); } var initValidation = function () { // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ // Step 1 validations.push(FormValidation.formValidation( form, { fields: { account_type: { validators: { notEmpty: { message: 'Account type is required' } } } }, plugins: { trigger: new FormValidation.plugins.Trigger(), bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row', eleInvalidClass: '', eleValidClass: '' }) } } )); // Step 2 validations.push(FormValidation.formValidation( form, { fields: { 'account_team_size': { validators: { notEmpty: { message: 'Time size is required' } } }, 'account_name': { validators: { notEmpty: { message: 'Account name is required' } } }, 'account_plan': { validators: { notEmpty: { message: 'Account plan is required' } } } }, plugins: { trigger: new FormValidation.plugins.Trigger(), // Bootstrap Framework Integration bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row', eleInvalidClass: '', eleValidClass: '' }) } } )); // Step 3 validations.push(FormValidation.formValidation( form, { fields: { 'business_name': { validators: { notEmpty: { message: 'Busines name is required' } } }, 'business_descriptor': { validators: { notEmpty: { message: 'Busines descriptor is required' } } }, 'business_type': { validators: { notEmpty: { message: 'Busines type is required' } } }, 'business_description': { validators: { notEmpty: { message: 'Busines description is required' } } }, 'business_email': { validators: { notEmpty: { message: 'Busines email is required' }, emailAddress: { message: 'The value is not a valid email address' } } } }, plugins: { trigger: new FormValidation.plugins.Trigger(), // Bootstrap Framework Integration bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row', eleInvalidClass: '', eleValidClass: '' }) } } )); // Step 4 validations.push(FormValidation.formValidation( form, { fields: { 'card_name': { validators: { notEmpty: { message: 'Name on card is required' } } }, 'card_number': { validators: { notEmpty: { message: 'Card member is required' }, creditCard: { message: 'Card number is not valid' } } }, 'card_expiry_month': { validators: { notEmpty: { message: 'Month is required' } } }, 'card_expiry_year': { validators: { notEmpty: { message: 'Year is required' } } }, 'card_cvv': { validators: { notEmpty: { message: 'CVV is required' }, digits: { message: 'CVV must contain only digits' }, stringLength: { min: 3, max: 4, message: 'CVV must contain 3 to 4 digits only' } } } }, plugins: { trigger: new FormValidation.plugins.Trigger(), // Bootstrap Framework Integration bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row', eleInvalidClass: '', eleValidClass: '' }) } } )); } var handleFormSubmit = function() { } return { // Public Functions init: function () { // Elements modalEl = document.querySelector('#kt_modal_create_account'); if (modalEl) { modal = new bootstrap.Modal(modalEl); } stepper = document.querySelector('#kt_create_account_stepper'); form = stepper.querySelector('#kt_create_account_form'); formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]'); formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]'); initStepper(); initValidation(); handleForm(); } }; }(); // On document ready KTUtil.onDOMContentLoaded(function() { KTCreateAccount.init(); });