Server IP : 150.95.80.236 / Your IP : 3.138.174.122 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 KTFormValidationDemoBasic = function () { // Private functions var exampleBasic = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_basic'); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'text_input': { validators: { notEmpty: { message: 'Text input is required' } } }, 'email_input': { validators: { emailAddress: { message: 'The value is not a valid email address' }, notEmpty: { message: 'Email address is required' } } }, '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' } } }, 'textarea_input': { validators: { notEmpty: { message: 'Textarea input is required' } } }, 'radio_input': { validators: { notEmpty: { message: 'Radio input is required' } } }, 'checkbox_input': { validators: { notEmpty: { message: 'Radio 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_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 exampleText = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_text'); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'text_input': { validators: { notEmpty: { message: 'Text 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_text_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 exampleEmail = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_email'); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'email_input': { validators: { emailAddress: { message: 'The value is not a valid email address' }, notEmpty: { message: 'Email address 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_email_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 exampleTextarea = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_textarea'); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'textarea_input': { validators: { notEmpty: { message: 'Textarea 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_textarea_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 exampleRadio = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_radio'); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'radio_input': { validators: { notEmpty: { message: 'Radio 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_radio_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 exampleCheckbox = function () { // Define form element const form = document.getElementById('kt_docs_formvalidation_checkbox'); // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/ var validator = FormValidation.formValidation( form, { fields: { 'checkbox_input': { validators: { notEmpty: { message: 'Checkbox 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_checkbox_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 () { exampleText(); exampleEmail(); exampleTextarea(); exampleRadio(); exampleCheckbox(); } }; }(); // On document ready KTUtil.onDOMContentLoaded(function () { KTFormValidationDemoBasic.init(); });