无效的表单元素出现而不尝试提交表单答案

【问题标题】：Invalid form elements appear without trying to submit the form无效的表单元素出现而不尝试提交表单
【发布时间】：2018-02-23 03:31:13
【问题描述】：

我有一个 html 注册页面，用户在其中输入信息，然后提交表单并将信息输入数据库。如果用户尝试在未输入所有所需信息的情况下提交表单，我有一个无效反馈类，它在提交之前捕获它并告诉用户在提交之前他们需要输入哪些信息。

表单在我的计算机上本地运行时完美运行，但当我将其上传到实际服务器时，注册页面仅显示所有无效反馈消息，甚至用户都没有提交表单。

我想知道是否有人对此有任何经验，或者知道这是否是我丢失文件的引导问题？我只是在寻找可能出错的建议。我使用 bootstrap、nodejs、css、html、express、js..

（正确）这是它在 localhost 上的样子：

（不正确）这是我服务器上的样子：

【问题讨论】：

嗯...背景颜色样式也不同...我想知道您是否在生产环境中缺少 CSS 文件或 JS 文件？
服务器上有本地代码的缩小版吗？
请分享代码，否则我们无能为力。
请勿编辑问题以包含答案，请在下方添加新答案。

标签： javascript html node.js bootstrap-4

【解决方案1】：

如果您使用的是 bootstrap 4，那么您需要添加 was-validated 类，该类将在通过客户端 JavaScript 验证表单后动态添加。像这样：

<form class="container was-validated" novalidate="">
    <div class="form-group">
        <label class="form-control-label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control" name="i1" id="inputSuccess1">
        <div class="valid-feedback">Success! You've done it.</div>
    </div>
    <div class="form-group">
        <label class="form-control-label" for="inputSuccess2">Input with danger</label>
        <input type="text" class="form-control" name="i2" required="" id="inputSuccess2">
        <div class="invalid-feedback">That didn't work.</div>
    </div>
    <div class="">
        <button type="submit" class="btn btn-secondary">Text</button>
    </div>
</form>

【讨论】：