"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(); });