Question

我是Google reCAPTCHA的新手，我正在尝试将其实施到现有的表单验证中。

这是我的原始代码：

if(document.getElementById('naam').value.length == '' || document.getElementById('firma').value.length == '' || !filter_email.test(email.value)|| document.getElementById('bericht').value.length == '') {
        document.getElementById('submit').disabled = true; }
    else {
        document.getElementById('submit').disabled = false; }

由于我是reCAPTCHA的新手，所以我一直在研究许多在线文档，但是它们都在描述一种不同的实现方式。

我希望像这样简单地实现它：

if(grecaptcha.getResponse() == "success" || document.getElementById('naam').value.length == '' || document.getElementById('firma').value.length == '' || !filter_email.test(email.value)|| document.getElementById('bericht').value.length == '') {
    document.getElementById('submit').disabled = true; }
else {
    document.getElementById('submit').disabled = false; }

但这似乎不起作用，如何在我现有的代码中正确地实现它？

编辑2 当按照Ralph Melhem的建议使用Invisible reCAPTCHA时，我将提交按钮更改为：

<input type="submit" name="submit" id="submit" value="Verstuur e-mail" class="g-recaptcha btn btn-info pull-right" data-sitekey="xxxx" data-callback="YourOnSubmitFn" disabled>

并保持了原始表单的有效性，但是表单没有发送，我在控制台ReCAPTCHA couldn't find user-provided function: YourOnSubmitFn中看到此错误

编辑3

我的新代码现在看起来像：

<!-- reCAPTCHA -->
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function onSubmit(token) {
  document.getElementById("contact").submit();
}
</script>

<form name="contact" action="#" method="post">

<div class="col-lg-6">

    <div class="form-group input-group" id="naam_div">
        <input type="text" class="form-control" id="naam" name="naam" value="" placeholder="Uw naam" onkeyup="validate()">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" id="naam_glyp"></span>
    </div>

    <div class="form-group input-group" id="firma_div">
        <input type="text" class="form-control" id="firma" name="firma" value="" placeholder="Uw firma" onkeyup="validate()">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" id="firma_glyp"></span>
    </div>

    <div class="form-group input-group" id="email_div">
        <input type="text" class="form-control" id="email" name="email" value="" placeholder="Uw email adres" onkeyup="validate()">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" id="email_glyp"></span>
    </div>

    <div class="form-group input-group" id="bericht_div">
      <textarea name="bericht" id="bericht" class="form-control" rows="5" placeholder="Type hier uw bericht" onkeyup="validate()"></textarea>
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" id="bericht_glyp"></span>
    </div>

  <input type="submit" name="submit" id="submit" value="Verstuur e-mail" class="g-recaptcha btn btn-info pull-right" data-sitekey="*************" data-callback="onSubmit" data-size="invisible" disabled>

</div>

</form>

<script>
function validate()
{
    // naam
    if(document.getElementById('naam').value.length == '') {
        document.getElementById('naam_div').className = "form-group input-group has-feedback";
        document.getElementById('naam_glyp').className = "glyphicon glyphicon-warning-sign form-control-feedback"; }
    else {
        document.getElementById('naam_div').className = "form-group input-group has-feedback";
        document.getElementById('naam_glyp').className = "glyphicon glyphicon-ok form-control-feedback"; }

    // firma
    if(document.getElementById('firma').value.length == '') {
        document.getElementById('firma_div').className = "form-group input-group has-feedback";
        document.getElementById('firma_glyp').className = "glyphicon glyphicon-warning-sign form-control-feedback"; }
    else {
        document.getElementById('firma_div').className = "form-group input-group has-feedback";
        document.getElementById('firma_glyp').className = "glyphicon glyphicon-ok form-control-feedback"; }

    // email
    var email = document.getElementById('email');
    var filter_email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if(document.getElementById('email').value == false) {
        document.getElementById('email_div').className = "form-group input-group has-feedback";
        document.getElementById('email_glyp').className = "glyphicon glyphicon-warning-sign form-control-feedback"; }
    else if (!filter_email.test(email.value)) {
        document.getElementById('email_div').className = "form-group input-group has-error has-feedback";
        document.getElementById('email_glyp').className = "glyphicon glyphicon-remove form-control-feedback"; }
    else {
        document.getElementById('email_div').className = "form-group input-group has-feedback";
        document.getElementById('email_glyp').className = "glyphicon glyphicon-ok form-control-feedback"; }

    // bericht
    if(document.getElementById('bericht').value.length == '') {
        document.getElementById('bericht_div').className = "form-group input-group has-feedback";
        document.getElementById('bericht_glyp').className = "glyphicon glyphicon-warning-sign form-control-feedback"; }
    else {
        document.getElementById('bericht_div').className = "form-group input-group has-feedback";
        document.getElementById('bericht_glyp').className = "glyphicon glyphicon-ok form-control-feedback"; }

    // submit form
    if(document.getElementById('naam').value.length == '' || document.getElementById('firma').value.length == '' || !filter_email.test(email.value)|| document.getElementById('bericht').value.length == '') {
        document.getElementById('submit').disabled = true; }
    else {
        document.getElementById('submit').disabled = false; }
}
</script>

实时版本为here。

使用data-callback="onSubmit"时，我的控制台Uncaught (in promise) null中出现此错误如果我使用data-callback="dataFallback"，则会出现此错误ReCAPTCHA couldn't find user-provided function: dataFallback

Answer 1

对于不可见的reCaptcha，可以如下设置表单按钮：

<button class="g-recaptcha btn btn-primary standard-button2 ladda-button" data-sitekey="YOURSITEKEY" data-callback="dataFallback"  data-size="invisible" type="submit" id="submit" name="submit" data-style="expand-left">Send Message</button>

并包含脚本

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
   function onSubmit(token) {
     document.getElementById("YOURFORMNAME").submit();
   }
 </script>

这将处理您尝试实现的验证。如果您仍然希望按照自己的方式进行操作，那么我可以帮助您进行清理，但是我相信以上方法对您的代码而言是最无创的

reCAPTCHA和JS表单验证

1 个答案: