Server IP : 150.95.80.236 / Your IP : 18.226.200.16 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/uat.pcu.in.th/demo15/src/js/custom/documentation/forms/formvalidation/ |
Upload File : |
"use strict"; // Class definition var KTFormValidationDemoAdvanced = function () { // Private functions var exampleAdvanced = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_advanced'); // Init daterangepicker --- for more info, please visit: https://www.daterangepicker.com/ $("#kt_daterangepicker").daterangepicker(); // Init flatpickr --- for more info, please visit: https://flatpickr.js.org/ $("#kt_flatpickr").flatpickr(); // Init tagify --- for more info, please visit: https://yaireo.github.io/tagify/ new Tagify(document.querySelector("#kt_tagify"), { whitelist: ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5", "Tag 6", "Tag 7", "Tag 8", "Tag 9", "Tag 10", "Tag 11", "Tag 12"], maxTags: 6, dropdown: { maxItems: 20, // <- mixumum allowed rendered suggestions classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted enabled: 0, // <- show suggestions on focus closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected } }); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'daterangepicker_input': { validators: { notEmpty: { message: 'Date range input is required' } } }, 'flatpickr_input': { validators: { date: { format: 'YYYY-MM-DD', message: 'The value is not a valid date', }, notEmpty: { message: 'Flatpickr input is required' } } }, 'avatar': { validators: { notEmpty: { message: 'Please select an image' }, file: { extension: 'jpg,jpeg,png', type: 'image/jpeg,image/png', message: 'The selected file is not valid' }, } }, 'select2_input': { validators: { notEmpty: { message: 'Select2 input is required' } } }, 'tagify_input': { validators: { notEmpty: { message: 'Tagify input is required' } } }, }, plugins: { trigger: new FormValidation.plugins.Trigger(), bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row', eleInvalidClass: '', eleValidClass: '' }) } } ); // Revalidate Select2 input. For more info, plase visit the official plugin site: https://select2.org/ $(form.querySelector('[name="select2_input"]')).on('change', function () { // Revalidate the field when an option is chosen validator.revalidateField('select2_input'); }); // Submit button handler const submitButton = document.getElementById('kt_docs_formvalidation_submit'); submitButton.addEventListener('click', function (e) { // Prevent default button action e.preventDefault(); // Validate form before submit if (validator) { validator.validate().then(function (status) { console.log('validated!'); if (status == 'Valid') { // Show loading indication submitButton.setAttribute('data-kt-indicator', 'on'); // Disable button to avoid multiple click submitButton.disabled = true; // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/ setTimeout(function () { // Remove loading indication submitButton.removeAttribute('data-kt-indicator'); // Enable button submitButton.disabled = false; // Show popup confirmation Swal.fire({ text: "Form has been successfully submitted!", icon: "success", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-primary" } }); //form.submit(); // Submit form }, 2000); } }); } }); } var exampleDateRangePicker = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_daterangepicker'); // Init daterangepicker --- for more info, please visit: https://www.daterangepicker.com/ $("#kt_daterangepicker").daterangepicker(); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'daterangepicker_input': { validators: { notEmpty: { message: 'Date range input is required' } } }, }, plugins: { trigger: new FormValidation.plugins.Trigger(), bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row', eleInvalidClass: '', eleValidClass: '' }) } } ); // Submit button handler const submitButton = document.getElementById('kt_docs_formvalidation_daterangepicker_submit'); submitButton.addEventListener('click', function (e) { // Prevent default button action e.preventDefault(); // Validate form before submit if (validator) { validator.validate().then(function (status) { console.log('validated!'); if (status == 'Valid') { // Show loading indication submitButton.setAttribute('data-kt-indicator', 'on'); // Disable button to avoid multiple click submitButton.disabled = true; // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/ setTimeout(function () { // Remove loading indication submitButton.removeAttribute('data-kt-indicator'); // Enable button submitButton.disabled = false; // Show popup confirmation Swal.fire({ text: "Form has been successfully submitted!", icon: "success", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-primary" } }); //form.submit(); // Submit form }, 2000); } }); } }); } var exampleFlatpickr = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_flatpickr'); // Init flatpickr --- for more info, please visit: https://flatpickr.js.org/ $("#kt_flatpickr").flatpickr(); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'flatpickr_input': { validators: { date: { format: 'YYYY-MM-DD', message: 'The value is not a valid date', }, notEmpty: { message: 'Flatpickr input is required' } } }, }, plugins: { trigger: new FormValidation.plugins.Trigger(), bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row', eleInvalidClass: '', eleValidClass: '' }) } } ); // Submit button handler const submitButton = document.getElementById('kt_docs_formvalidation_flatpickr_submit'); submitButton.addEventListener('click', function (e) { // Prevent default button action e.preventDefault(); // Validate form before submit if (validator) { validator.validate().then(function (status) { console.log('validated!'); if (status == 'Valid') { // Show loading indication submitButton.setAttribute('data-kt-indicator', 'on'); // Disable button to avoid multiple click submitButton.disabled = true; // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/ setTimeout(function () { // Remove loading indication submitButton.removeAttribute('data-kt-indicator'); // Enable button submitButton.disabled = false; // Show popup confirmation Swal.fire({ text: "Form has been successfully submitted!", icon: "success", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-primary" } }); //form.submit(); // Submit form }, 2000); } }); } }); } var exampleImageInput = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_image_input'); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'avatar': { validators: { notEmpty: { message: 'Please select an image' }, file: { extension: 'jpg,jpeg,png', type: 'image/jpeg,image/png', message: 'The selected file is not valid' }, } }, }, plugins: { trigger: new FormValidation.plugins.Trigger(), bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row', eleInvalidClass: '', eleValidClass: '' }) } } ); // Submit button handler const submitButton = document.getElementById('kt_docs_formvalidation_image_input_submit'); submitButton.addEventListener('click', function (e) { // Prevent default button action e.preventDefault(); // Validate form before submit if (validator) { validator.validate().then(function (status) { console.log('validated!'); if (status == 'Valid') { // Show loading indication submitButton.setAttribute('data-kt-indicator', 'on'); // Disable button to avoid multiple click submitButton.disabled = true; // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/ setTimeout(function () { // Remove loading indication submitButton.removeAttribute('data-kt-indicator'); // Enable button submitButton.disabled = false; // Show popup confirmation Swal.fire({ text: "Form has been successfully submitted!", icon: "success", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-primary" } }); //form.submit(); // Submit form }, 2000); } }); } }); } var examplePassword = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_password'); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'current_password': { validators: { notEmpty: { message: 'Current password is required' } } }, 'new_password': { validators: { notEmpty: { message: 'The password is required' }, callback: { message: 'Please enter valid password', callback: function (input) { if (input.value.length > 0) { return validatePassword(); } } } } }, 'confirm_password': { validators: { notEmpty: { message: 'The password confirmation is required' }, identical: { compare: function () { return form.querySelector('[name="new_password"]').value; }, message: 'The password and its confirm are not the same' } } }, }, plugins: { trigger: new FormValidation.plugins.Trigger(), bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row', eleInvalidClass: '', eleValidClass: '' }) } } ); // Submit button handler const submitButton = document.getElementById('kt_docs_formvalidation_password_submit'); submitButton.addEventListener('click', function (e) { // Prevent default button action e.preventDefault(); // Validate form before submit if (validator) { validator.validate().then(function (status) { console.log('validated!'); if (status == 'Valid') { // Show loading indication submitButton.setAttribute('data-kt-indicator', 'on'); // Disable button to avoid multiple click submitButton.disabled = true; // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/ setTimeout(function () { // Remove loading indication submitButton.removeAttribute('data-kt-indicator'); // Enable button submitButton.disabled = false; // Show popup confirmation Swal.fire({ text: "Form has been successfully submitted!", icon: "success", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-primary" } }); //form.submit(); // Submit form }, 2000); } }); } }); } var exampleSelect2 = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_select2'); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'select2_input': { validators: { notEmpty: { message: 'Select2 input is required' } } }, }, plugins: { trigger: new FormValidation.plugins.Trigger(), bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row', eleInvalidClass: '', eleValidClass: '' }) } } ); // Revalidate Select2 input. For more info, plase visit the official plugin site: https://select2.org/ $(form.querySelector('[name="select2_input"]')).on('change', function () { // Revalidate the field when an option is chosen validator.revalidateField('select2_input'); }); // Submit button handler const submitButton = document.getElementById('kt_docs_formvalidation_select2_submit'); submitButton.addEventListener('click', function (e) { // Prevent default button action e.preventDefault(); // Validate form before submit if (validator) { validator.validate().then(function (status) { console.log('validated!'); if (status == 'Valid') { // Show loading indication submitButton.setAttribute('data-kt-indicator', 'on'); // Disable button to avoid multiple click submitButton.disabled = true; // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/ setTimeout(function () { // Remove loading indication submitButton.removeAttribute('data-kt-indicator'); // Enable button submitButton.disabled = false; // Show popup confirmation Swal.fire({ text: "Form has been successfully submitted!", icon: "success", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-primary" } }); //form.submit(); // Submit form }, 2000); } }); } }); } var exampleTagify = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_tagify'); // Init tagify --- for more info, please visit: https://yaireo.github.io/tagify/ new Tagify(document.querySelector("#kt_tagify"), { whitelist: ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5", "Tag 6", "Tag 7", "Tag 8", "Tag 9", "Tag 10", "Tag 11", "Tag 12"], maxTags: 6, dropdown: { maxItems: 20, // <- mixumum allowed rendered suggestions classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted enabled: 0, // <- show suggestions on focus closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected } }); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'tagify_input': { validators: { notEmpty: { message: 'Tagify input is required' } } }, }, plugins: { trigger: new FormValidation.plugins.Trigger(), bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row', eleInvalidClass: '', eleValidClass: '' }) } } ); // Submit button handler const submitButton = document.getElementById('kt_docs_formvalidation_tagify_submit'); submitButton.addEventListener('click', function (e) { // Prevent default button action e.preventDefault(); // Validate form before submit if (validator) { validator.validate().then(function (status) { console.log('validated!'); if (status == 'Valid') { // Show loading indication submitButton.setAttribute('data-kt-indicator', 'on'); // Disable button to avoid multiple click submitButton.disabled = true; // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/ setTimeout(function () { // Remove loading indication submitButton.removeAttribute('data-kt-indicator'); // Enable button submitButton.disabled = false; // Show popup confirmation Swal.fire({ text: "Form has been successfully submitted!", icon: "success", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-primary" } }); //form.submit(); // Submit form }, 2000); } }); } }); } return { // Public Functions init: function () { exampleDateRangePicker(); exampleFlatpickr(); exampleImageInput(); examplePassword(); exampleSelect2(); exampleTagify(); } }; }(); // On document ready KTUtil.onDOMContentLoaded(function () { KTFormValidationDemoAdvanced.init(); });