jQuery Validation Plugin add a rule for Google Recaptcha V.2

Question

I Have a register page where the Google Recaptcha V.2 is used. I want to add a rule for enter Recaptcha using the jQuery Validation Plugin. In the register page the following code is presented for showing the Google Recaptcha:

    <?php if(!$this->K2Params->get('recaptchaV2')): ?>
    <label class="formRecaptcha"><?php echo JText::_('K2_ENTER_THE_TWO_WORDS_YOU_SEE_BELOW'); ?></label>
    <?php endif; ?>
    <div id="recaptcha" name="recaptcha" class="<?php echo $this->recaptchaClass; ?>"></div>

In the rigister.js I added the following code:

jQuery(($)=>{
$().ready(()=>{
    // validate signup form on keyup and submit
    $("#josForm").validate({
        ignore: ".ignore",
        rules: {
            name: {
                required: true,
                minlength: 3
            },
            password: {
                required: true,
                minlength: 7
            },
            email: {
                required: true,
                email: true
            },
        },
        messages: {
            name: {
                required: "enter your name",
                minlength: "no less than 3 symbols"
            },
            password: {
                required: "enter the password",
                minlength: "no less than 7 symbols"
            },
            email: "enter your email",
            email: {
                required: "enter your email"
            },
        },
        submitHandler: function(form) {
            if (recaptcha.getResponse()) {
            form.submit();
            } else {
            alert('Please confirm captcha to proceed')
            }
        },
    });
});
});

But this rule is not worked for Google Recaptcha. Can you help we with this issue?

Please use the [site search](https://stackoverflow.com/questions/tagged/jquery-validate+recaptcha) before posting a new question. — Sparky, Jul 13 '20 at 16:40
I was looking for a similar problem, but in them is not quite what I needed. So I asked my question. — Nabla, Jul 15 '20 at 21:45

score 0 · Answer 1 · answered Jul 13 '20 at 12:49

Ohhh, I add the rule for hiddenRecaptcha and add the hidden input with id and name "hiddenRecaptcha". The correct code is below:

    <?php if(!$this->K2Params->get('recaptchaV2')): ?>
    <label class="formRecaptcha"><?php echo JText::_('K2_ENTER_THE_TWO_WORDS_YOU_SEE_BELOW'); ?></label>
    <?php endif; ?>
    <div id="recaptcha" name="recaptcha" class="<?php echo $this->recaptchaClass; ?>"></div>
    <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha" />

And in register.js:

jQuery(($)=>{
$().ready(()=>{
    $("#josForm").validate({
        ignore: ".ignore",
        rules: {
            name: {
                required: true,
                minlength: 3
            },
            password: {
                required: true,
                minlength: 7
            },
            email: {
                required: true,
                email: true
            },
            hiddenRecaptcha: {
                required: function() {
                if(grecaptcha.getResponse() == '') {
                    return true;
                } else {
                    return false;
                }
            }
            },
        },
        messages: {
            name: {
                required: "enter your name",
                minlength: "no less than 3 symbols"
            },
            password: {
                required: "enter the password",
                minlength: "no less than 7 symbols"
            },
            email: "enter your email",
            email: {
                required: "enter your email"
            },
        },
    });
});
});

Now the rule is worked for Captcha.

jQuery Validation Plugin add a rule for Google Recaptcha V.2

1 Answers1