trabajando ya en el formulario

This commit is contained in:
2024-04-17 12:19:42 +02:00
parent b702d286ce
commit 82beb615a3
6 changed files with 2920 additions and 5 deletions

View File

@ -1,237 +0,0 @@
/**
* Cliente presupuesto Wizard
*/
'use strict';
(function () {
// Init custom option check
//window.Helpers.initCustomOptionCheck();
// Vertical Wizard
// --------------------------------------------------------------------
const clientePresupuestoWizard = document.querySelector('#wizard-presupuesto-cliente');
if (typeof clientePresupuestoWizard !== undefined && clientePresupuestoWizard !== null) {
// Wizard form
const clientePresupuestoWizardForm = clientePresupuestoWizard.querySelector('#presupuesto-cliente-form');
// Wizard steps
const clientePresupuestoWizardFormStep1 = clientePresupuestoWizardForm.querySelector('#datos-generales');
const clientePresupuestoWizardFormStep2 = clientePresupuestoWizardForm.querySelector('#disenio-libro');
const clientePresupuestoWizardFormStep3 = clientePresupuestoWizardForm.querySelector('#direcciones-libro');
const clientePresupuestoWizardFormStep4 = clientePresupuestoWizardForm.querySelector('#resumen-libro');
// Wizard next prev button
const clientePresupuestoWizardNext = [].slice.call(clientePresupuestoWizardForm.querySelectorAll('.btn-next'));
const clientePresupuestoWizardPrev = [].slice.call(clientePresupuestoWizardForm.querySelectorAll('.btn-prev'));
let validationStepper = new Stepper(clientePresupuestoWizard, {
linear: true
});
// Deal Type
const FormValidation1 = FormValidation.formValidation(clientePresupuestoWizardFormStep1, {
fields: {
dealAmount: {
validators: {
notEmpty: {
message: 'Please enter amount'
},
numeric: {
message: 'The amount must be a number'
}
}
},
dealRegion: {
validators: {
notEmpty: {
message: 'Please select region'
}
}
}
},
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()
}
}).on('core.form.valid', function () {
// Jump to the next step when all fields in the current step are valid
validationStepper.next();
});
// select2 (Region)
const dealRegion = $('#dealRegion');
if (dealRegion.length) {
dealRegion.wrap('<div class="position-relative"></div>');
dealRegion
.select2({
placeholder: 'Select an region',
dropdownParent: dealRegion.parent()
})
.on('change.select2', function () {
// Revalidate the region field when an option is chosen
FormValidation1.revalidateField('dealRegion');
});
}
// Deal Details
const FormValidation2 = FormValidation.formValidation(clientePresupuestoWizardFormStep2, {
fields: {
// * Validate the fields here based on your requirements
dealTitle: {
validators: {
notEmpty: {
message: 'Please enter deal title'
}
}
},
dealCode: {
validators: {
notEmpty: {
message: 'Please enter deal code'
},
stringLength: {
min: 4,
max: 10,
message: 'The deal code must be more than 4 and less than 10 characters long'
},
regexp: {
regexp: /^[A-Z0-9]+$/,
message: 'The deal code can only consist of capital alphabetical and number'
}
}
}
},
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()
}
}).on('core.form.valid', function () {
// Jump to the next step when all fields in the current step are valid
validationStepper.next();
});
// select2 (Offered Item)
const dealOfferedItem = $('#dealOfferedItem');
if (dealOfferedItem.length) {
dealOfferedItem.wrap('<div class="position-relative"></div>');
dealOfferedItem
.select2({
placeholder: 'Select an offered item',
dropdownParent: dealOfferedItem.parent()
})
.on('change.select2', function () {
// Revalidate the field if needed when an option is chosen
// FormValidation2.revalidateField('dealOfferedItem');
});
}
// Deal Usage
const FormValidation3 = FormValidation.formValidation(clientePresupuestoWizardFormStep3, {
fields: {
// * Validate the fields here based on your requirements
},
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()
}
}).on('core.form.valid', function () {
validationStepper.next();
});
// Deal Usage
const FormValidation4 = FormValidation.formValidation(clientePresupuestoWizardFormStep4, {
fields: {
// * Validate the fields here based on your requirements
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap5: new FormValidation.plugins.Bootstrap5({
// Use this for enabling/changing valid/invalid class
// eleInvalidClass: '',
eleValidClass: '',
rowSelector: '.col-md-12'
}),
autoFocus: new FormValidation.plugins.AutoFocus(),
submitButton: new FormValidation.plugins.SubmitButton()
}
}).on('core.form.valid', function () {
// You can submit the form
// clientePresupuestoWizardForm.submit()
// or send the form data to server via an Ajax request
// To make the demo simple, I just placed an alert
alert('Submitted..!!');
});
clientePresupuestoWizardNext.forEach(item => {
item.addEventListener('click', event => {
// When click the Next button, we will validate the current step
switch (validationStepper._currentIndex) {
case 0:
FormValidation1.validate();
break;
case 1:
FormValidation2.validate();
break;
case 2:
FormValidation3.validate();
break;
case 3:
FormValidation4.validate();
break;
default:
break;
}
});
});
clientePresupuestoWizardPrev.forEach(item => {
item.addEventListener('click', event => {
switch (validationStepper._currentIndex) {
case 3:
validationStepper.previous();
break;
case 2:
validationStepper.previous();
break;
case 1:
validationStepper.previous();
break;
case 0:
default:
break;
}
});
});
}
})();