javascript - reCAPTCHA 和 JS 表单验证

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 找不到用户提供的函数: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>

这将处理您尝试实现的验证。如果你还是想按照你的方式去做，我可以帮你清理一下，但我相信上面的方式对你的代码来说是最无侵入的