时间戳

首页 > 解决方案 > JavaScript 表单验证（必需）

javascript - JavaScript 表单验证（必需）

问题描述

您好，我正在为自己建立一个网站，遇到了这个问题，我的表单直接进入了它的成功页面，输入为空。我怎样才能解决这个问题？我已经浏览了像我这样的其他问题，但似乎没有一个可以解决这个问题。表单位于 HTML 标记内，输入关闭“/>”。我认为这可能是我的脚本影响它，但我不明白我应该如何进行编码以“验证”表单的概念。我知道您可以使用 JavaScript 和 JQuery 来做到这一点。话虽如此，我该如何解决我的这个问题，这里是代码片段。

<div class="contact-form col-md-6 col-sm-6">
                    <form action="#" name="contact" class="needs-validation">
                        <label for="fname">Full Name</label>
                        <input type="text" id="fname" name="firstname" placeholder="Enter your full name..." required />
                        <label for="email">Email</label>
                        <input type="text" id="email" name="email" placeholder="Enter a valid email..." required />
                        <label for="subject">Message</label>
                        <textarea id="subject" name="subject" placeholder="Your requested choice/inquiry..." required></textarea>
                        <a href="success.html" class="button-submit">SEND</a>
                    </form>
</div>

这是我试图处理的脚本：

// Disable form submissions if there are invalid fields
(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Get the forms we want to add validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();

您的帮助将不胜感激，谢谢。

标签： javascripthtmljqueryrequired

解决方案

您的代码不正确，不应该是这样的， 带有href将始终将您重定向到指定的页面，而不是进行发布或获取。

更改此代码：

 <a href="success.html" class="button-submit">SEND</a>

对此：

 <button class="btn btn-primary" type="submit">SEND</button>

您的 HTML 应如下所示：

<div class="contact-form col-md-6 col-sm-6">
    <form method="post" action="#" name="contact" class="needs-validation">
        <label for="fname">Full Name</label>
        <input class="form-control" type="text" id="fname" name="firstname" placeholder="Enter your full name..." required />
        <label for="email">Email</label>
        <input class="form-control" type="text" id="email" name="email" placeholder="Enter a valid email..." required />
        <label for="subject">Message</label>
        <textarea class="form-control" rows="3" id="subject" name="subject" placeholder="Your requested choice/inquiry..." required></textarea><br>
        <button type="submit"class="btn btn-success">SEND</button>
    </form>
</div>

您的脚本没有任何问题！您必须正确学习html结构。

推荐阅读