javascript - 如何防止表单在验证检查错误后消失？

Question

当我单击（注册 konneckApp）按钮时，会显示表单，如果我将所有字段留空，则表单会消失。我需要再次单击（注册 konneckApp）按钮。显示闪存验证错误。有没有办法防止表格消失？我正在使用 MVC 模式、香草 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="[e-mail]"  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>

标签： javascriptformsexpressmodel-view-controllersubmit