Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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();
});


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


"Great platform featuring a user-friendly design and an extensive range of
donghua stream content. Ideal for anyone in search of creativity and top-notch quality!"



Verify that the action element on your form points to the PHP page that will manage login papa's pizzeria. Check to be sure your JavaScript/jQuery code is submitting the form appropriately and not only doing client-side validation.



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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(