如何解决如何防止表单在验证检查错误后消失?
当我单击 (Signup for konneckApp) 按钮时,表单会出现,如果我将所有字段留空,表单就会消失。我需要再次单击(注册 konneckApp)按钮。显示闪存验证错误。有没有办法防止表格消失?我正在使用 MVC 模式、vanilla javascript 和 express。
https://i.stack.imgur.com/H6C3x.gif
**form events**
let registerBtn = document.querySelector("#RegisterBtn");
let signUp = document.querySelector("#signUp");
let modal = document.querySelector("#modal1");
modal.style.display = "none";
let closeBtn = document.querySelector(".close");
let overlay = document.querySelector("#overlay");
overlay.style.display = "none";
registerBtn.addEventListener("click",() => {
modal.style.display = "block";
overlay.style.display = "block";
modal.classList.remove("hideModal");
});
closeBtn.addEventListener("click",() => {
modal.classList.add("hideModal");
overlay.style.display = "none";
});
**userController**
const User = require("../models/User");
exports.login = function (req,res) {
let user = new User(req.body);
user
.login()
.then(function (result) {
req.session.user = { favColor: "blue",username: user.data.username };
req.session.save(() => res.redirect("/"));
})
.catch(function (e) {
req.flash("errors",e);
req.session.save(() => res.redirect("/"));
});
};
exports.logout = function (req,res) {
req.session.destroy(function () {
res.redirect("/");
});
// res.send("You are now logout");
};
exports.register = function (req,res) {
let user = new User(req.body);
user.register();
if (user.errors.length) {
user.errors.forEach((error) => {
req.flash("regErrors",error);
});
req.session.save(() => {
res.redirect("/");
});
} else {
res.send("Congrats,there are no errors.");
}
};
exports.home = function (req,res) {
if (req.session.user) {
res.render("home-dashboard",{ username: req.session.user.username });
} else {
res.render("index-guest",{ errors: req.flash("errors"),regErrors: req.flash("regErrors") });
}
};
<div class="container flex flex-col p-20 bg-gray-200 rounded-xl">
<%# Alert Message Error %>
<% regErrors.forEach(function(message) { %>
<div class="max-w-md px-4 py-3 mx-auto leading-normal text-gray-100 transform bg-red-400 rounded-lg animate-fadeIn" role="alert">
<p class=""><%= message %></p>
</div>
<% }) %>
<h1 class="mb-5 text-4xl font-medium text-gray-700">Sign Up</h1>
<p class="mb-1">Please fill in this form to create an account.</p>
<hr>
<label class="mb-2 text-gray-700" for="userNameregister"><b>Username</b></label>
<input name="username" class="p-3 mb-2 rounded-md " type="text" placeholder="Choose a username"
id="userNameregister" autocomplete="off">
<label class="mb-2 text-gray-700" for="emailRegister"><b>Email</b></label>
<input name="email" class="p-3 mb-2 rounded-md" type="text" placeholder="you@example.com" id="emailRegister"
autocomplete="off">
<label class="mb-2 text-gray-700" for="passwordRegister"><b>Password</b></label>
<input name="password" class="p-3 mb-2 rounded-md" type="password" placeholder="Create a password"
id="passwordRegister">
<div>
<button id="signUp" type="submit"
class="p-3 mt-5 text-lg font-medium text-center bg-blue-600 rounded-lg cursor-pointer text-gray-50 delay-350 hover:bg-blue-800">Sign
Up</button>
</div>
</div>
</form>
</div>
<div id="overlay" class="absolute top-0 w-full h-screen bg-gray-900 opacity-50"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。