使用jquery无法正常工作的表单验证后,看不见的reCaptcha V2

时间:2018-05-20 20:25:17

标签: javascript php jquery validation recaptcha

我正在编写一个带有工作表单的php页面,我想要添加不可见的recaptcha。 形式如下:

<form action="#" id="contact-form">
    <div class="input-group name-email input-field">
        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
    </div>
     <!-- RECAPTCHA div-->
    <div class="g-recaptcha" data-sitekey=[key] data-callback="onSubmit" data-size="invisible">
    </div>
    <input type="button" id="form-submit" class="pull-right" value="Send">
 <form>

要验证我使用的表单:

<script type="text/javascript">
        $(function(){
            alert("Just Before Contact Form Validate");
            $('#contact-form').validate({
                rules: {
                        name: {
                        required: true,
                        minlength: 2
                    }
                },
                messages: {
                    name: {
                        required: "What's your name?",
                        minlength: "Name min.2 chars"
                    }
                },
                submitHandler: function(form) {
                    $(form).ajaxSubmit({
                        type:"POST",
                        data: $(form).serialize(),
                        url:[Another PHP page],
          success: {[do this]
          },
          error: {[do that]
          }etc etc

我把警报用于调试原因;当我加载页面时,我收到它。 在表单之后,我包含两个外部js文件进行验证:

        <!-- Contact form validation -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>

要处理recaptcha,在表单之后和javascript表单之前添加了警告

<script>
function onSubmit(token) {
    alert("Inside OnSubmit");
    var element=document.getElementById('contact-form');
    element.submit();
}
</script>

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

<script>
    $(function() {
        $("#form-submit").on('click',function() {
        grecaptcha.execute();
        alert('g-recaptcha executed');
        return false;
        });
    });
</script>

出于调试原因,我也提出了这些警报。 当我加载页面时,我收到第一个警报;控制台部件中未报告任何错误。我按“Snd”,即使没有填写字段,我得到“g-recaptcha execution”和“inside on Submit”,然后页面重新加载而不验证输入。我希望它能够停止并显示错误,但它会继续,现在我的浏览器不再是myPage.php,而是myPage.php?name =&amp; g-recaptcha-response = [long string]。仍然,控制台中没有显示错误。 我该如何解决?有人能帮帮我吗? 谢谢。

0 个答案:

没有答案