2

出于安全原因，我尝试在我的联系表中添加不可见的验证码。

我在控制台中收到此错误：

未捕获的类型错误：document.getElementById(...).submit 不是函数

我哪里错了？

必要的属性是类名“g-recaptcha”、data-sitekey 属性中的站点密钥，以及用于处理 data-callback 属性中验证码完成的 JavaScript 回调的名称。

谷歌验证码文档。

以下是详细信息：

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        function onSubmit(data) {
            document.getElementById("contact").submit();
        }
    </script>
</head>
<body>
    <p class="contacts__form-title">Title</p>
    <form action="results.php" class="js-form" id="contact" method="post" name="contact">
        <div class="form-group">
            <input class="form-field js-field-name" placeholder="Your name" required="" type="text"> <span class="form-validation"></span> <span class="form-invalid-icon"><i aria-hidden="true" class="mdi mdi-close"></i></span>
        </div>
        <div class="form-group">
            <input class="form-field js-field-email" placeholder="Your e-mail" required="" type="email"> <span class="form-validation"></span> <span class="form-invalid-icon"><i aria-hidden="true" class="mdi mdi-close"></i></span>
        </div>
        <div class="form-group">
            <textarea class="form-field js-field-message" placeholder="Type the message here" required=""></textarea> <span class="form-validation"></span> <span class="form-invalid-icon"><i aria-hidden="true" class="mdi mdi-close"></i></span>
        </div><button class="site-btn site-btn--form g-recaptcha" data-badge="invisible" data-callback="onSubmit" data-sitekey="6LdZIzkUAAAAAKLqsuoYZIh2cZqy3s0nwhkZpEC9" type="submit" value="Send">Send</button>
    </form>
<script src="assets/js/jquery-2.2.4.min.js"></script>
</body>
</html>

JS

'use strict';


//Validation forms
function validateForm(selector) {
    Array.from(document.querySelectorAll(selector)).forEach(item => {
        item.addEventListener('input', (e) => {
            if(e.target.value === ''){
            item.dataset.touched = false;
            }
        });
        item.addEventListener('invalid', () => {
            item.dataset.touched = true;
        });
        item.addEventListener('blur', () => {
            if (item.value !== '') item.dataset.touched = true;
        });
    });
};

validateForm('.js-form .form-field');

var form = document.querySelector('.js-form');
var formName = '.js-form';

form.addEventListener('submit', function(e){
    submitForm(e, formName);
});

function submitForm(e, formName) {
    e.preventDefault();
    var name = $(formName + ' .js-field-name').val();
    var email = $(formName + ' .js-field-email').val();
    var message = $(formName + ' .js-field-message').val();

    var formData = {
        name: name,
        email: email,
        message: message
    };

    $.ajax({
        type: "POST",
        url: 'mail.php',
        data: formData,
        success: function () {
            console.log('success');
            //...
        },
        error: function () {
            console.log('error');
            //...
        }
    });
}
4

0 回答 0