Question

我有一个用于客户窗体的Recaptcha，他们只希望在单击Submit按钮时显示Recaptcha。

但是，仅当所有输入字段均已填写时，提交按钮才可以单击，并且当字段为空并且单击按钮时，他们希望显示工具提示。

您可以想象这意味着当我有一个.click()事件时，如果有空白字段，则无法禁用该按钮。但是，我无法将Recaptcha绑定到按钮，因为它将自动触发，因此我不得不执行一个不可见的Recaptcha，其中div具有data-sitekey属性和g-recaptcha类。 / p>

所以我需要知道如何通过JavaScript触发recaptcha事件，并使它具有与绑定到按钮相同的结果。

如果需要更多信息，请告诉我。

编辑：

var fieldsFilled = false;

    if(screen.width <= 767) {
        $('#fbForm2').find('input, textarea').each(function () {
            $(this).keyup(function () {
                fieldsFilled = checkFormFieldsEmpty('#fbForm2') && $('#terms').is(":checked");

                if(fieldsFilled) {
                    $("#btnSubmit").css("pointer-events","auto");
                } else {
                    $("#btnSubmit").css("pointer-events","none");
                }
            });
        });

        $('#terms').change(function () {
            fieldsFilled = checkFormFieldsEmpty('#fbForm2') && $('#terms').is(":checked");

            if(fieldsFilled) {
                $("#btnSubmit").css("pointer-events","auto");
            } else {
                $("#btnSubmit").css("pointer-events","none"); 
            }
        });
    } else {
        $('#fbForm').find('input, textarea').each(function () {
            $(this).keyup(function () {
                fieldsFilled = checkFormFieldsEmpty('#fbForm') && $('#terms').is(":checked");

                if(fieldsFilled) {
                    $("#btnSubmit").css("pointer-events","auto");
                } else {
                    $("#btnSubmit").css("pointer-events","none");
                }
            });
        });

        $('#terms').change(function () {
            fieldsFilled = checkFormFieldsEmpty('#fbForm') && $('#terms').is(":checked");

            if(fieldsFilled) {
                $("#btnSubmit").css("pointer-events","auto");
            } else {
                $("#btnSubmit").css("pointer-events","none"); 
            }
        });
    }

    //Checks if the form id has blank text fields
    function checkFormFieldsEmpty(id) {
        $(id).find('input, textarea').each(function () {
            //Check whether the input/textarea is blank
            if(!$(this).val()) {
                //If the input/textarea is empty return false
                return false;
            }
        });

        return true;
    }

    $('#btnSubmit').tooltip();

    $(document).on('click', '#btnSubmit', function (event) {
        if($('#btnSubmit').hasClass('disabled')) {
            $('#btnSubmit').tooltip({
                animation: false,
                delay: {show: 500, hide: 100},
                placement: 'right',
                text: 'Invalid input fields',
            });
        } else {
            grecaptcha.render('recaptchaField', {
                'sitekey' : '6LfDBGcUAAAAABnYRk1ZQkapzCs8c1Rr2ZARMchF',
                'callback' : onSubmit, 
            });
            grecaptcha.execute(widgetId);
        }
    });
    //-----------------------------------------------------------------------------------------

//recaptcha
var onSubmit = function (token) {
    if (screen.width >= 768) {
         document.getElementById("fbForm").submit();
    }else if (screen.width <= 767){
         document.getElementById("fbForm2").submit();
    }
};

</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

...

<div class="form-group">
      <label class="col-md-4 control-label"></label>
      <div class="col-md-4"><br>
       <!-- NOTE: Made some changes for click events as advised here: https://developers.google.com/recaptcha/docs/invisible#programmatic_execute -->
        <button id="btnSubmit" type="submit" value="" class="btn btn-success">SUBMIT <span class="glyphicon glyphicon-send"></span></button>
        <div class="g-recaptcha" data-sitekey="6LfDBGcUAAAAABnYRk1ZQkapzCs8c1Rr2ZARMchF" data-callback="onSubmit" data-size="invisible"></div>
        <!-- Test: 6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN -->
        <!-- Live: 6LfDBGcUAAAAABnYRk1ZQkapzCs8c1Rr2ZARMchF -->
      </div>
    </div>

Answer 1

«但是，我无法将Recaptcha绑定到按钮，因为它将自动触发...»
那是一个错误的假设。

您可以使用.preventDefault()阻止默认的提交行为。因此，您可以检查输入内容是否正常。如果可以，请正常进行。

也就是说：

$('#btnSubmit').on("click",function(e){
  e.preventDefault();

  // Check all you input are filled
  // If yes, then submit for real:
  $(this).closest("form").submit();
});

我想在提交时触发重新验证没有问题...

仅在JavaScript / jQuery中触发提交按BUT时才显示的Recaptcha？

1 个答案: