adding files of assets
This commit is contained in:
Arjun Patel
@@ -0,0 +1,536 @@
|
||||
"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();
|
||||
});
|
||||
Reference in New Issue
Block a user