I have a login form which is collect user email and password. Then I use JavaScript fetch to post data to express. then I use express validator check the inputs are correct. Then I send response res.status(200).redirect("/auth"); like this, but JavaScript is prevent the login page to redirect because in my external JavaScript I use e.preventDefault() function. But I want to redirect to next page. When I remove e.preventDefault() it stops the validation so I cant remove that. What should I do?
I'm using Node, Express Js, JSON file for storing Data, EJS Template with external JavaScript file. Aslo serving static JavaScript file too which is located in public/js/script.js file. Also using express-validator in middleware folder to validate the fields
Here is the express code:
export const loginsHandle = async (req, res) => {
const {
email,
password,
} = req.body;
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(422).json({
errors: errors.array(),
});
} else {
try {
var accountPP = new PP({
email: email,
password: password,
});
let addingData = JSON.parse(fs.readFileSync(accountDataFile, "utf-8"));
addingData.push(accountPP);
await fs.writeFileSync(accountDataFile, JSON.stringify(addingData));
res.status(200).redirect("/auth");
} catch (error) {
console.log(error);
res.status(200).send(error);
}
}
};
Here is external JavaScript :
const form = document.querySelector("form");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const btn = document.getElementById("submit");
const forGot = document.getElementById("forgot");
const singBtn = document.getElementById("sign");
const footer = document.getElementById("menuFoot");
forGot.addEventListener("click", (e) => {
e.preventDefault();
});
singBtn.addEventListener("click", (e) => {
e.preventDefault();
});
footer.addEventListener("click", (e) => {
e.preventDefault();
});
form.onsubmit = sendLogin;
function sendLogin(e) {
e.preventDefault();
let formData = new FormData(form);
let Params = {
headers: {
"Content-Type": "application/json",
accept: "application/json",
},
body: JSON.stringify({
email: formData.get("email"),
password: formData.get("password"),
}),
method: "POST",
};
fetch("http://localhost:5001/login", Params)
.then((res) => {
return res.json();
})
.then((data) => {
if (data.errors) {
data.errors.forEach((err) => {
if (data.errors[0].param == "email") {
emailInput.style.borderColor = "red";
} else if (data.errors[0].param == "password") {
passwordInput.style.borderColor = "red";
} else {
emailInput.style.borderColor = "";
passwordInput.style.borderColor = "";
}
});
}
return data;
})
.catch((error) => console.log(error, "error"));
}
