使用jQuery Validation Plugin进行新的reCaptcha

我搜索了很多但我无法弄清楚如何在表单提交之前validation新的reCaptcha ，以及jQuery validation Plugin的validate函数。

我的意思是这样的：

$.validator.addMethod('reCaptchaMethod', function (value, element, param) { if (grecaptcha.getResponse() == ''){ return false; } else { // I would like also to check server side if the recaptcha response is good return true } }, 'You must complete the antispam verification'); $("#form").validate({ rules: { name: { required: true, minlength: 2 }, email: { required: true, email: true }, reCaptcha: { reCaptchaMethod: true } }, messages: { name: "Please fill your name", email: "Please use a valid email address" }, submitHandler : function () { $.ajax({ type : "POST", url : "sendmail.php", data : $('#form').serialize(), success : function (data) { $('#message').html(data); } }); } }); 

简而言之，如果用户在提交表单之前已经通过了重新validationvalidation，我想使用远程方法检查服务器端，以及其他validation规则。

我能够检查recaptcha AFTER提交（在sendmail.php上），但更好的是将recaptchavalidation响应与其他字段validation一起使用。

主要原因是为了获得更好的用户体验，同时检查所有字段。

我已经设法在submitHandler中实现了一些移动检查：

  submitHandler : function () { if (grecaptcha.getResponse() == ''){ // if error I post a message in a div $( '#reCaptchaError' ).html( '
Please verify youare human
' ); } else { $.ajax({ type : "POST", url : "sendmail.php", data : $('#form').serialize(), success : function (data) { $('#message').html(data); } }); } } 

但我不喜欢有两个原因：1）我只是检查recaptcha是否已经填写，而不是它是否有效。 2）用户感觉像是两步validation。

在这个答案中，他们说可以在回调中渲染Recaptcha，在成功的CAPTCHA响应上指定函数调用。

我试图实现它，但我无法在validate（）函数的规则中使用此解决方案。

任何提示都是受欢迎的！

Answer 1

我知道这个问题有点过时，但我遇到了同样的问题而且找到了解决方案。 您可以通过在reCaptcha div旁边添加隐藏字段来完成此操作，例如：

然后在你的JavaScript中：

 $("#form").validate({ ignore: ".ignore", rules: { name: { required: true, minlength: 2 }, email: { required: true, email: true }, hiddenRecaptcha: { required: function () { if (grecaptcha.getResponse() == '') { return true; } else { return false; } } } },(...rest of your code) 

请注意 ，您的代码中必须包含ignore: ".ignore" ，因为jquery.validate默认忽略隐藏字段，而不validation它们。

如果要在reCapcha上删除错误消息，请向reCapcha元素添加数据回调

然后在你的js文件中添加

 function recaptchaCallback() { $('#hiddenRecaptcha').valid(); }; 

Answer 2

您还可以阻止在submitHandler中提交表单

 $("#loginForm").validate({ rules: { username: { required: true, minlength: 6 }, password: { required: true, }, }, submitHandler: function(form) { if (grecaptcha.getResponse()) { form.submit(); } else { alert('Please confirm captcha to proceed') } } }); 

Answer 3

我发现你的解决方案很有趣（@FabioG）。

但是，我已经修改了它以供我自己使用，我愿意分享其他人使用的代码。

我正在开发一个交互式表单，在您完成步骤时进行validation。

它用于订购食物。 因此，表单需要validation和激活注册按钮，它使用最新的reCaptcha到目前为止（2016年12月5日）。

此外，此代码处理过期的reCaptcha，服务器端validation通过ajax（面团不包括 – 如果有人需要它随时评论我的答案，我会相应地编辑它）。

让我们开始吧。

HTML代码：

 
 
 
Step One:
 Register under one minute! E-mail*  Password*  
   
 
 
Step two:
 All fields with a sign are required!* First Name*  Last Name*  Address*  Entrance  Apartment #  Interphone  Mobile Number*  Special Instructions  
 
 Register  

如您所见，提交按钮（“.button-register”）最初被禁用。

您只能通过填写必填 （*）字段来启用它。

请记住，我没有包含任何CSS。 该表格是最低限度的，仅用于教育目的。

很少有与@FabioG不同的东西，答案是：

无需隐藏元素或使用“.ignore”。 我用内联CSS隐藏了它。

成功的reCaptcha和过期的reCaptcha有一个响应回调 。

因此，如果您的reCaptcha在填写表单时过期，它将使其无效，并且该按钮将再次被禁用 。

同样，表单使用输入字段（隐藏的输入字段）将信息传递到AJAX（稍后的PHP）并validation服务器端（这是一个潜在的安全风险，我在文本末尾更多地介绍了它） 。

让我们转到JavaScript / jQuery。

的JavaScript / jQuery的：

 function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; function recaptchaCallback() { var response = grecaptcha.getResponse(), $button = jQuery(".button-register"); jQuery("#hidden-grecaptcha").val(response); console.log(jQuery("#registerForm").valid()); if (jQuery("#registerForm").valid()) { $button.attr("disabled", false); } else { $button.attr("disabled", "disabled"); } } function recaptchaExpired() { var $button = jQuery(".button-register"); jQuery("#hidden-grecaptcha").val(""); var $button = jQuery(".button-register"); if (jQuery("#registerForm").valid()) { $button.attr("disabled", false); } else { $button.attr("disabled", "disabled"); } } function submitRegister() { //ajax stuff } (function ($, root, undefined) { $(function () { 'use strict'; jQuery("#registerForm").find("input").on("keyup", debounce(function() { var $button = jQuery(".button-register"); if (jQuery("#registerForm").valid()) { $button.attr("disabled", false); } else { $button.attr("disabled", "disabled"); } }, 1000)); jQuery("#registerForm").validate({ rules: { "email-register": { required: true, email: true }, "password-register": { required: true, minlength: "6" }, "first-name": "required", "last-name": "required", address: "required", telephone: "required", "hidden-grecaptcha": { required: true, minlength: "255" } }, messages: { "email-register": "Enter valid e-mail address", "password-register": { required: "Enter valid password", minlength: "Password must be bigger then 6 chars!" }, "first-name": "Required!", "last-name": "Required!", address: "Required!", telephone: "Required!" }, submitHandler: submitRegister }); }); })(jQuery, this); 

正如您在这里看到的，有一些函数： recaptchaCallback（）和recaptchaExpired（） 。

通过数据属性data-callback嵌入的recaptchaCallback（）使用grecaptcha.getResponse（）来查看是否validation了reCaptcha，如果是，它将令牌输入到隐藏的输入字段并要求通过jQuery重新validation（ “#registerForm）.validate（）;.

但是，如果reCaptcha同时到期，它将使用“data-expired-callback”中的已分配函数，从输入字段中删除令牌并再次请求重新validation，因为该字段为空，这将失败。 这是通过函数recaptchaExpired（）实现的 。

稍后在代码中您可以看到我们添加了一个jQuery keyup函数，以检查重新validation并查看用户是否已将所需信息传递给输入字段。 如果信息和字段成功validation，则keyupfunction将启用Register按钮。

另外，我在关键字上使用了去抖动脚本（tnx，David Walsh）。 所以它不会导致浏览器滞后。 因为，会有很多打字。

但是，请记住，如果用户决定绕过reCaptcha，他总是可以在输入字段中输入“255”字符长字符串。 但是，我更进一步，并建立了一个AJAXvalidation服务器端来确认reCaptcha。 面团，我没有把它包括在答案中。

它认为这段代码对前一个答案的改进是微不足道的。 如果您有任何疑问或需要AJAX / PHP代码随时发表评论。 我会尽可能地提供它。

inheritance人也是代码： 使用jQuery.validation进行reCaptcha

您可以在这里找到有关reCatpcha数据属性和函数的所有信息： reCaptcha API

希望有人帮助过！

问候，

Answer 4

我今天在这个问题上遇到了困难，最终结果如下：

这感觉就像最简单的方法。 有人肯定抱怨像这样把js内联，但我很好。