jQuery Validation Plugin add a rule for Google Recaptcha V.2
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?
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.
