Question

我不确定为什么我的代码不能触发html5表格验证。我在这里检查了几个帖子并实现了他们的方法，但没有一个工作。

我正在创建动态隐形reCaptcha表单，表单验证无法正常工作......我不确定出了什么问题，我做错了什么......

有人知道这个问题吗？

我的代码：

    $(function () {
    $("button.g-recaptcha").click(function (event) {
        event.preventDefault();
        var currentForm = $(this).closest("form");
        if(currentForm[0].checkValidity()) {
            grecaptcha.execute();
        }
        else{
            grecaptcha.reset();
        }
    });

});

var onloadCallback = function () {
    $("button.g-recaptcha").each(function () {
        var el = $(this);

        grecaptcha.render($(el).attr("id"), {
            "sitekey": "MY SITE KEY",
            "size": "invisible",
            "badge": "inline",
            "callback": function (token) {
                $(el).parent().find(".g-recaptcha-response").val(token);
                $(el).closest("form").submit();
            }
        }, true);
    });

};

表单提交的JS代码：

$("#sendMessageButton").click(function (e) {
        e.preventDefault();

        if ($('#contact_topic').val() == '') {
            $('#contact_topic-button').popover({
                trigger: 'manual',
                html: 'true',
                placement: 'top',
                content: function () {
                    return messages.please_enter_the_required_fields_first;
                }
            }).popover('show');

            setTimeout(function () {
                $('.popover').fadeOut('slow', function () {
                });
            }, 2000);
            return;
        }
        if ($('#contact_topic_subcategory').val() == '') {
            $('#contact_topic_subcategory-button').popover({
                trigger: 'manual',
                html: 'true',
                placement: 'top',
                content: function () {
                    return messages.please_enter_the_required_fields_first;
                }
            }).popover('show');

            setTimeout(function () {
                $('.popover').fadeOut('slow', function () {
                });
            }, 2000);
            return;
        }

        var client = clientBrowser();

        $("#contact_os").val(client.os + ' ' + client.osVersion);
        $("#contact_client").val(client.client + ' ' + client.version);
        $("#contact_mobile").val(client.mobile);
        $("#contact_cookies").val(client.cookieEnabled);
        $("#contact_resolution").val(client.screenSize);
        $("#contact_window").val(client.windowSize);

        $("#contact-form").submit();
    });

枝/ HTML：

<div class="signup-form contact-form">
    {{ form_start(form, { 'attr': {'id': 'contact-form'} }) }}
    {{ form_label(form) }}
    {{ form_errors(form) }}
    {{ form_widget(form) }}
{% for flashMessage in app.session.flashbag.get('error') %}
    <div class="captcha-alert">
        <span class="icon-alert"> ! </span>
        {{ flashMessage }}
    </div>
{% endfor %}
    <button id="sendMessageButton" class="btn btn--green">{{ "contact.send_message"|trans }}</button>
    <div class="validationHolder g-recaptcha" id="contactRecaptcha"></div>
    {{ form_end(form) }}

    {#<div class="send-message">#}
    {#<a href="" class="send-message-button" id="sendMessageButton">{{ "contact.send_message"|trans }}</a>#}
    {#</div>#}
</div>

这是事件的控制台日志：

CALLING SUBMIT
INSIDE ON SUBMIT
IS FORM VALID: false

隐形reCaptcha不会触发html5表单验证

0 个答案: