Question

我有一个带有javascript验证器的登录表单，我也使用Google隐形Recaptcha。当我不使用Recaptcha时，表单工作完全正确，但当我使用Recaptcha时，它调用一个javascript函数来提交表单，我不能在该函数中使用验证器。我对javascript知之甚少，所以任何帮助都会受到赞赏。

HTML代码：

<form class="form-horizontal form-material validate-form" id="loginform" method="post" action="" role="form">
    <h3 class="box-title m-b-20">Login</h3>
    <div class="Input-Style">
        <div class="wrap-input2 validate-input" data-validate="Email is uvalid">
            <input class="input2" id="inputEmail" type="text" name="username" autofocus>
            <span class="focus-input2" data-placeholder="your email"></span>
        </div>
    </div>
    <div class="Input-Style">
        <div class="wrap-input2 validate-input" data-validate="password is required">
            <input class="input2" id="inputPassword" type="password" name="password">
            <span class="focus-input2" data-placeholder="your password"></span>
        </div>
    </div>
    <div class="form-group text-center m-t-20">
        <div class="col-xs-12">
            <button id="login" class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light g-recaptcha"
                    data-sitekey="" data-callback="enableSubmit">Login
            </button>
        </div>
    </div>
</form>

Javascript代码：

(function ($) {
    "use strict";

    /*==================================================================
    [ Validate ]*/
    var username = $('.validate-input input[name="username"]');
    var password = $('.validate-input input[name="password"]');
    $('.validate-form').on('submit',function(){
        var check = true;

        if($(username).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
            showValidate(username);
            check=false;
        }

        if($(password).val().trim() == ''){
            showValidate(password);
            check=false;
        }

        return check;
    });

    $('.validate-form .input2').each(function(){
        $(this).focus(function(){
           hideValidate(this);
       });
    });

    function showValidate(input) {
        var thisAlert = $(input).parent();

        $(thisAlert).addClass('alert-validate');
    }

    function hideValidate(input) {
        var thisAlert = $(input).parent();

        $(thisAlert).removeClass('alert-validate');
    }
})(jQuery);

Answer 1

You need to use grecaptcha.render callback. You also need to create separate functions which will validate your form like this:

function formValidator() {
    // validation script will be here
}

and pass this function to grecaptcha.render method

    grecaptcha.render('example3', {
      'sitekey' : 'your_site_key',
      'callback' : formValidator,
      'theme' : 'dark'
    });

Answer 2

Modify the first lines of your JavaScript:

[...]
/*==================================================================
[ Validate ]*/
var username = $('.validate-input input[name="username"]');
var password = $('.validate-input input[name="password"]');
var verifyCallback = function(){
    var check = true;
[...]

So, the validation function is not bound to the submit event (which is caught by Recaptcha) but to a variable.

Additionally, at these lines after the validateCallback function:

[...]
    return check;
});

grecaptcha.render('html_element', {
    'sitekey' : 'your_site_key',
    'callback': verifyCallback
});
[...]

Now, first the captcha will be checked and afterwards your validation will be performed as a so called "callback" method.

使用javascript提交表单

2 个答案: