New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
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?
<!--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">Претрага свих набавки.
</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--><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>Replies (1)
Hi,
Can you check the related custom JS scripts related this this modal "src/js/custom/utilities/modals/new-target.js" and refer to "target_tags" input validation rule ?
When you adjust the form you will need to keep the form validation rules synced. More info for the FormValidation plugin that Metronic 8 uses:
Regards,
Sean
