Simply input form, Metronic v8.x, utilities modals forms new target html

In Metronic v8.x we can find simply modal input form for new target utilities/modals/forms/new-target.html

But, when I add some fields in this form and change others fields so they fit my input form I could not get error when the fields is empty. As long as input form is the same as original it works. It is enough to change the field target_tags and input form it won't work.

Do you know why this is happening?

<pre lang="html"> <!--begin::Modal - New Bill--> <div class="modal fade" id="modal_new_bill" tabindex="-1" aria-hidden="true"> <!--begin::Modal dialog--> <div class="modal-dialog modal-dialog-centered mw-650px"> <!--begin::Modal content--> <div class="modal-content rounded"> <!--begin::Modal header--> <div class="modal-header pb-0 border-0 justify-content-end"> <!--begin::Close--> <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"> <i class="ki-duotone ki-cross fs-1"> <span class="path1"></span> <span class="path2"></span> </i> </div> <!--end::Close--> </div> <!--begin::Modal header--> <!--begin::Modal body--> <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15"> <!--begin:Form--> <form id="modal_new_bill_form" class="form" action="#"> <!--begin::Heading--> <div class="mb-13 text-center"> <!--begin::Title--> <h1 class="mb-3">Креирање набавке</h1> <!--end::Title--> <!--begin::Description--> <div class="text-muted fw-semibold fs-5">Претрага свих <a href="#" class="fw-bold link-primary">набавки</a>. </div> <!--end::Description--> </div> <!--end::Heading--> <!--begin::Input group--> <div class="d-flex flex-column mb-8 fv-row"> <!--begin::Label--> <label class="d-flex align-items-center fs-6 fw-semibold mb-2"> <span class="required">Број набавке</span> <span class="ms-1" data-bs-toggle="tooltip" title="Број фактуре"> <i class="ki-duotone ki-information-5 text-gray-500 fs-6"> <span class="path1"></span> <span class="path2"></span> <span class="path3"></span> </i> </span> </label> <!--end::Label--> <input type="text" class="form-control form-control-solid" placeholder="Број набавке" name="bill_number" /> </div> <!--end::Input group--> <!--begin::Input group--> <div class="row g-9 mb-8"> <!--begin::Col--> <div class="col-md-6 fv-row"> <label class="required fs-6 fw-semibold mb-2">Магацин</label> <select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Изаберите магацин..." name="store_id"> <option value="">Select user...</option> <option value="1">Karina Clark</option> <option value="2">Robert Doe</option> <option value="3">Niel Owen</option> <option value="4">Olivia Wild</option> <option value="5">Sean Bean</option> </select> </div> <!--end::Col--> <!--begin::Col--> <div class="col-md-6 fv-row"> <label class="required fs-6 fw-semibold mb-2">Датум набавке </label> <!--begin::Input--> <div class="position-relative d-flex align-items-center"> <!--begin::Icon--> <i class="ki-duotone ki-calendar-8 fs-2 position-absolute mx-4"> <span class="path1"></span> <span class="path2"></span> <span class="path3"></span> <span class="path4"></span> <span class="path5"></span> <span class="path6"></span> </i> <!--end::Icon--> <!--begin::Datepicker--> <input class="form-control form-control-solid ps-12" placeholder="Изаберите датум..." name="bill_date" /> <!--end::Datepicker--> </div> <!--end::Input--> </div> <!--end::Col--> </div> <!--end::Input group--> <!--begin::Input group--> <div class="d-flex flex-column mb-8"> <label class="required fs-6 fw-semibold mb-2">Добављач</label> <select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Изаберите добављача..." name="provider_id"> <option value="">Select user...</option> <option value="1">Karina Clark</option> <option value="2">Robert Doe</option> <option value="3">Niel Owen</option> <option value="4">Olivia Wild</option> <option value="5">Sean Bean</option> </select> </div> <!--end::Input group--> <!--begin::Input group--> <div class="d-flex flex-column mb-8 fv-row"> <!--begin::Label--> <label class="d-flex align-items-center fs-6 fw-semibold mb-2"> <span class="required">Tags</span> <span class="ms-1" data-bs-toggle="tooltip" title="Specify a target priorty"> <i class="ki-duotone ki-information-5 text-gray-500 fs-6"> <span class="path1"></span> <span class="path2"></span> <span class="path3"></span> </i> </span> </label> <!--end::Label--> <input class="form-control form-control-solid" value="Important" name="tagsys" /> </div> <!--end::Input group--> <!--begin::Input group--> <div class="d-flex flex-stack mb-8"> <!--begin::Label--> <div class="me-5"> <label class="fs-6 fw-semibold">Adding Users by Team Members</label> <div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div> </div> <!--end::Label--> <!--begin::Switch--> <label class="form-check form-switch form-check-custom form-check-solid"> <input class="form-check-input" type="checkbox" value="1" checked="checked" /> <span class="form-check-label fw-semibold text-muted">Allowed</span> </label> <!--end::Switch--> </div> <!--end::Input group--> <!--begin::Input group--> <div class="mb-15 fv-row"> <!--begin::Wrapper--> <div class="d-flex flex-stack"> <!--begin::Label--> <div class="fw-semibold me-5"> <label class="fs-6">Notifications</label> <div class="fs-7 text-muted">Allow Notifications by Phone or Email</div> </div> <!--end::Label--> <!--begin::Checkboxes--> <div class="d-flex align-items-center"> <!--begin::Checkbox--> <label class="form-check form-check-custom form-check-solid me-10"> <input class="form-check-input h-20px w-20px" type="checkbox" name="communication[]" value="email" checked="checked" /> <span class="form-check-label fw-semibold">Email</span> </label> <!--end::Checkbox--> <!--begin::Checkbox--> <label class="form-check form-check-custom form-check-solid"> <input class="form-check-input h-20px w-20px" type="checkbox" name="communication[]" value="phone" /> <span class="form-check-label fw-semibold">Phone</span> </label> <!--end::Checkbox--> </div> <!--end::Checkboxes--> </div> <!--end::Wrapper--> </div> <!--end::Input group--> <!--begin::Actions--> <div class="text-center"> <button type="reset" id="modal_new_bill_cancel" class="btn btn-light me-3">Cancel</button> <button type="submit" id="modal_new_bill_submit" class="btn btn-primary"> <span class="indicator-label">Submit</span> <span class="indicator-progress">Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span> </button> </div> <!--end::Actions--> </form> <!--end:Form--> </div> <!--end::Modal body--> </div> <!--end::Modal content--> </div> <!--end::Modal dialog--> </div> <!--end::Modal - New Bill--> </pre> <pre> <script> "use strict"; var ModalNewTarget = function() { var t, e, n, a, o, i; return { init: function() { (i = document.querySelector("#modal_new_bill")) && (o = new bootstrap.Modal(i), a = document.querySelector("#modal_new_bill_form"), t = document.getElementById("modal_new_bill_submit"), e = document.getElementById("modal_new_bill_cancel"), $(a.querySelector('[name="bill_date"]')).flatpickr({ enableTime: !0, dateFormat: "d.m.Y." }), n = FormValidation.formValidation(a, { fields: { bill_number: { validators: { notEmpty: { message: "Број набавке је обавезан" } } }, store_id: { validators: { notEmpty: { message: "Потребан је магацин" } } }, bill_date: { validators: { notEmpty: { message: "Датум набавке је обавезно поље" } } }, provider_id: { validators: { notEmpty: { message: "Не заборавите провајдера" } } } }, plugins: { trigger: new FormValidation.plugins.Trigger, bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: ".fv-row", eleInvalidClass: "", eleValidClass: "" }) } }), // 2e3 = 2 × 10³ → 2 × 1000 → 2000 t.addEventListener("click", (function(e) { e.preventDefault(); n && n.validate().then((function(e) { //console.log("validated!"); if ("Valid" == e) { const formData = new FormData(a); // Convert FormData to JSON object const data = {}; formData.forEach((value, key) => { data[key] = value; }); // fetch('/dm47/A/process-target.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data) }) .then(response => { if (!response.ok) { throw new Error('Грешка. Проблем на мрежи'); } return response.json(); }) .then(result => { if (result.success) { t.setAttribute("data-kt-indicator", "on"); t.disabled = !0; setTimeout((function() { t.removeAttribute("data-kt-indicator"); t.disabled = !1; Swal.fire({ text: "Напомена. Подаци за обраду су успешно послати", icon: "success", buttonsStyling: !1, confirmButtonText: "Одлично, настави", customClass: { confirmButton: "btn btn-primary" } }).then((function(t) { t.isConfirmed && o.hide() })) }), 2e3) } else { Swal.fire({ text: result.message || "Грешка. Прослеђени подаци се не могу обрадити", icon: "error", buttonsStyling: !1, confirmButtonText: "Да, разумем", customClass: { confirmButton: "btn btn-primary" } }); } }) .catch(error => { //console.error('Error:', error); t.removeAttribute("data-kt-indicator"); t.disabled = !1; Swal.fire({ text: "Грешка. Подаци за обраду се не могу послати. Покушајте поново", icon: "error", buttonsStyling: !1, confirmButtonText: "Да, наравно", customClass: { confirmButton: "btn btn-primary" } }); }); // } else { Swal.fire({ text: "Грешка. Изгледа да постоје неке празна поља. Покушајте поново", icon: "error", buttonsStyling: !1, confirmButtonText: "Да, слажем се", customClass: { confirmButton: "btn btn-primary" } }) } })) })), e.addEventListener("click", (function(t) { t.preventDefault(); Swal.fire({ text: "Да ли сте сигурни да желите да откажете унос података", icon: "warning", showCancelButton: !0, buttonsStyling: !1, confirmButtonText: "Да, откажи", cancelButtonText: "Не, врати ме", customClass: { confirmButton: "btn btn-primary", cancelButton: "btn btn-active-light" } }).then((function(t) { t.value ? (a.reset(), o.hide()) : "cancel" === t.dismiss && Swal.fire({ text: "Ваш унос података није отказан", icon: "error", buttonsStyling: !1, confirmButtonText: "Да, тако је", customClass: { confirmButton: "btn btn-primary" } }) })) })) ) } } }(); KTUtil.onDOMContentLoaded((function() { ModalNewTarget.init() })); </script> </pre>