LOGIN FORM NOT WORKING
Please can you help me with the Login Form. I am using Metronic 8
The form validation is working just fine but it does not redirect to my PHP Page to check for the user in the database. What Am I doing wrong?
This is from assets/js/custom/authentication/sign-in/general.js
"use strict";
var KTSigninGeneral = function () {
var form, submitBtn, validator;
return {
init: function () {
form = document.querySelector("#kt_sign_in_form");
submitBtn = document.querySelector("#kt_sign_in_submit");
validator = FormValidation.formValidation(form, {
fields: {
email: {
validators: {
notEmpty: {
message: "Email address is required"
},
emailAddress: {
message: "The input is not a valid email address"
}
}
},
password: {
validators: {
notEmpty: {
message: "The password is required"
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: ".fv-row",
eleInvalidClass: "",
eleValidClass: ""
})
}
});
submitBtn.addEventListener("click", function (event) {
event.preventDefault();
validator.validate().then(function (status) {
if (status === "Valid") {
var redirectUrl = form.getAttribute("data-kt-redirect-url");
if (redirectUrl) {
window.location.href = redirectUrl;
} else {
// Redirect to default login page
window.location.href = "login.html";
}
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
}).catch(function (error) {
Swal.fire({
text: "Sorry, there was a network error, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
});
});
}
};
}();
KTUtil.onDOMContentLoaded(function () {
KTSigninGeneral.init();
});Replies (2)
Hi,
Please set a backend script URL into the form's action attribute and uncomment //form.submit(); in src/js/custom/authentication/sign-in/general.js and rebuild your assets with gulp task as explained Quick Setup guide.
Regards.
The login only handling the validation on the client side, after the status === valid
you could do a JQuery Ajax callback to your php login page which can handle the database and session creation. And then send back more errors or the redirect location if the login was valid
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
