mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
terminando servicios manipulados y preimpresion
This commit is contained in:
@ -1,343 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// Init custom option check
|
||||
window.Helpers.initCustomOptionCheck();
|
||||
|
||||
// Bootstrap validation example
|
||||
//------------------------------------------------------------------------------------------
|
||||
// const flatPickrEL = $('.flatpickr-validation');
|
||||
const flatPickrList = [].slice.call(document.querySelectorAll('.flatpickr-validation'));
|
||||
// Flat pickr
|
||||
if (flatPickrList) {
|
||||
flatPickrList.forEach(flatPickr => {
|
||||
flatPickr.flatpickr({
|
||||
allowInput: true,
|
||||
monthSelectorType: 'static'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
const bsValidationForms = document.querySelectorAll('.needs-validation');
|
||||
|
||||
// Loop over them and prevent submission
|
||||
Array.prototype.slice.call(bsValidationForms).forEach(function (form) {
|
||||
form.addEventListener(
|
||||
'submit',
|
||||
function (event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
// Submit your form
|
||||
alert('Submitted!!!');
|
||||
}
|
||||
|
||||
form.classList.add('was-validated');
|
||||
},
|
||||
false
|
||||
);
|
||||
});
|
||||
})();
|
||||
/**
|
||||
* Form Validation (https://formvalidation.io/guide/examples)
|
||||
* ? Primary form validation plugin for this template
|
||||
* ? In this example we've try to covered as many form inputs as we can.
|
||||
* ? Though If we've miss any 3rd party libraries, then refer: https://formvalidation.io/guide/examples/integrating-with-3rd-party-libraries
|
||||
*/
|
||||
//------------------------------------------------------------------------------------------
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
(function () {
|
||||
const formValidationExamples = document.getElementById('formValidationExamples'),
|
||||
formValidationSelect2Ele = jQuery(formValidationExamples.querySelector('[name="formValidationSelect2"]')),
|
||||
formValidationTechEle = jQuery(formValidationExamples.querySelector('[name="formValidationTech"]')),
|
||||
formValidationLangEle = formValidationExamples.querySelector('[name="formValidationLang"]'),
|
||||
formValidationHobbiesEle = jQuery(formValidationExamples.querySelector('.selectpicker')),
|
||||
tech = [
|
||||
'ReactJS',
|
||||
'Angular',
|
||||
'VueJS',
|
||||
'Html',
|
||||
'Css',
|
||||
'Sass',
|
||||
'Pug',
|
||||
'Gulp',
|
||||
'Php',
|
||||
'Laravel',
|
||||
'Python',
|
||||
'Bootstrap',
|
||||
'Material Design',
|
||||
'NodeJS'
|
||||
];
|
||||
|
||||
const fv = FormValidation.formValidation(formValidationExamples, {
|
||||
fields: {
|
||||
formValidationName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your name'
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationEmail: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your email'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'The value is not a valid email address'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationPass: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your password'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationConfirmPass: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please confirm password'
|
||||
},
|
||||
identical: {
|
||||
compare: function () {
|
||||
return formValidationExamples.querySelector('[name="formValidationPass"]').value;
|
||||
},
|
||||
message: 'The password and its confirm are not the same'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationFile: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select the file'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationDob: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your DOB'
|
||||
},
|
||||
date: {
|
||||
format: 'YYYY/MM/DD',
|
||||
message: 'The value is not a valid date'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationSelect2: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your country'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationLang: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please add your language'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationTech: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select technology'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationHobbies: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your hobbies'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationBio: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your bio'
|
||||
},
|
||||
stringLength: {
|
||||
min: 100,
|
||||
max: 500,
|
||||
message: 'The bio must be more than 100 and less than 500 characters long'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationGender: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your gender'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationPlan: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your preferred plan'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationSwitch: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your preference'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationCheckbox: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please confirm our T&C'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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 'formValidationName':
|
||||
case 'formValidationEmail':
|
||||
case 'formValidationPass':
|
||||
case 'formValidationConfirmPass':
|
||||
case 'formValidationFile':
|
||||
case 'formValidationDob':
|
||||
case 'formValidationSelect2':
|
||||
case 'formValidationLang':
|
||||
case 'formValidationTech':
|
||||
case 'formValidationHobbies':
|
||||
case 'formValidationBio':
|
||||
case 'formValidationGender':
|
||||
return '.col-md-6';
|
||||
case 'formValidationPlan':
|
||||
return '.col-xl-3';
|
||||
case 'formValidationSwitch':
|
||||
case 'formValidationCheckbox':
|
||||
return '.col-12';
|
||||
default:
|
||||
return '.row';
|
||||
}
|
||||
}
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
},
|
||||
init: instance => {
|
||||
instance.on('plugins.message.placed', function (e) {
|
||||
//* Move the error message out of the `input-group` element
|
||||
if (e.element.parentElement.classList.contains('input-group')) {
|
||||
// `e.field`: The field name
|
||||
// `e.messageElement`: The message element
|
||||
// `e.element`: The field element
|
||||
e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
|
||||
}
|
||||
//* Move the error message out of the `row` element for custom-options
|
||||
if (e.element.parentElement.parentElement.classList.contains('custom-option')) {
|
||||
e.element.closest('.row').insertAdjacentElement('afterend', e.messageElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//? Revalidation third-party libs inputs on change trigger
|
||||
|
||||
// Flatpickr
|
||||
flatpickr(formValidationExamples.querySelector('[name="formValidationDob"]'), {
|
||||
enableTime: false,
|
||||
// See https://flatpickr.js.org/formatting/
|
||||
dateFormat: 'Y/m/d',
|
||||
// After selecting a date, we need to revalidate the field
|
||||
onChange: function () {
|
||||
fv.revalidateField('formValidationDob');
|
||||
}
|
||||
});
|
||||
|
||||
// Select2 (Country)
|
||||
if (formValidationSelect2Ele.length) {
|
||||
formValidationSelect2Ele.wrap('<div class="position-relative"></div>');
|
||||
formValidationSelect2Ele
|
||||
.select2({
|
||||
placeholder: 'Select country',
|
||||
dropdownParent: formValidationSelect2Ele.parent()
|
||||
})
|
||||
.on('change.select2', function () {
|
||||
// Revalidate the color field when an option is chosen
|
||||
fv.revalidateField('formValidationSelect2');
|
||||
});
|
||||
}
|
||||
|
||||
// Typeahead
|
||||
|
||||
// String Matcher function for typeahead
|
||||
const substringMatcher = function (strs) {
|
||||
return function findMatches(q, cb) {
|
||||
var matches, substrRegex;
|
||||
matches = [];
|
||||
substrRegex = new RegExp(q, 'i');
|
||||
$.each(strs, function (i, str) {
|
||||
if (substrRegex.test(str)) {
|
||||
matches.push(str);
|
||||
}
|
||||
});
|
||||
|
||||
cb(matches);
|
||||
};
|
||||
};
|
||||
|
||||
// Check if rtl
|
||||
if (isRtl) {
|
||||
const typeaheadList = [].slice.call(document.querySelectorAll('.typeahead'));
|
||||
|
||||
// Flat pickr
|
||||
if (typeaheadList) {
|
||||
typeaheadList.forEach(typeahead => {
|
||||
typeahead.setAttribute('dir', 'rtl');
|
||||
});
|
||||
}
|
||||
}
|
||||
formValidationTechEle.typeahead(
|
||||
{
|
||||
hint: !isRtl,
|
||||
highlight: true,
|
||||
minLength: 1
|
||||
},
|
||||
{
|
||||
name: 'tech',
|
||||
source: substringMatcher(tech)
|
||||
}
|
||||
);
|
||||
|
||||
// Tagify
|
||||
let formValidationLangTagify = new Tagify(formValidationLangEle);
|
||||
formValidationLangEle.addEventListener('change', onChange);
|
||||
function onChange() {
|
||||
fv.revalidateField('formValidationLang');
|
||||
}
|
||||
|
||||
//Bootstrap select
|
||||
formValidationHobbiesEle.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
|
||||
fv.revalidateField('formValidationHobbies');
|
||||
});
|
||||
})();
|
||||
});
|
||||
Reference in New Issue
Block a user