FormValidation.js with Repeater Form

Question

Hi all, for the form validation is bind with attribute "name" only. If i have repeater form how do i validation with it ?

For example:

username: {
	validators: {
		notEmpty: {
			message: "Username not empty"
		}
	}
}

if i put username[] will get error

Sean · Answer

Hi,

At the moment we do not have this example so we will check this further and implement this and provide you a working example the soonest.

Regards.

Sean · Answer

Hi,

Please follow the below code to implement this:

JS:

copy    // Define form element
const form = document.getElementById("kt_docs_repeater_form");

// Init form validation rules. For more info check the FormValidation plugin"s official documentation:
var validator = FormValidation.formValidation(
 form,
 {
 plugins: {
 trigger: new FormValidation.plugins.Trigger(),
 bootstrap: new FormValidation.plugins.Bootstrap5({
 rowSelector: ".fv-row",
 eleInvalidClass: "",
 eleValidClass: ""
 }),
 excluded: new FormValidation.plugins.Excluded({
 excluded: function (field, ele, eles) {
 if (form.querySelector("[name="" + field + ""]") === null) {
 return true;
 }
 },
 }),
 }
 }
);

const addFields = function(index) {
 const namePrefix = "data[" + index + "]";

 // Add validators
 validator.addField(namePrefix + "[name]", {
 validators: {
 notEmpty: {
 message: "Text input is required"
 }
 }
 });

 validator.addField(namePrefix + "[email]", {
 validators: {
 emailAddress: {
 message: "The value is not a valid email address"
 },
 notEmpty: {
 message: "Email address is required"
 }
 }
 });

 validator.addField(namePrefix + "[primary][]", {
 validators: {
 notEmpty: {
 message: "Required"
 }
 }
 });
};

const removeFields = function(index) {
 const namePrefix = "data[" + index + "]";

 validator.addField(namePrefix + "[name]");
 validator.addField(namePrefix + "[email]");
 validator.addField(namePrefix + "[primary][]");
}

$(form).repeater({
 initEmpty: false,

 show: function () {
 $(this).slideDown();

 const index = $(this).closest("[data-repeater-item]").index();

 addFields(index);
 },

 hide: function (deleteElement) {
 $(this).slideUp(deleteElement);
 }
});

// Initial fields
addFields(0);

// Submit button handler
const submitButton = document.getElementById("kt_docs_repeater_button");
submitButton.addEventListener("click", function (e) {
 // Prevent default button action
 e.preventDefault();

 // Validate form before submit
 if (validator) {
 validator.validate().then(function (status) {
 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: 
 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);
 }
 });
 }
});    

HTML:
https://gist.github.com/KeenthemesHub/a5ac1af938ce6c6ddbbf072afb62a7ce

We will add this example to the docs in the next v8.1.9 update that we are planning to release in a few days.

Regards.

FormValidation.js with Repeater Form

Replies (2)

Metronic

ReUI

Products

Legal

Stay Connected