javascript - Recaptcha 弹出警告

Question

我有 Ajax 表单。

客户端的表单字段使用 HTMLSelectElement.setCustomValidity() 进行验证。一切都很好。当发生错误时，浏览器会显示一个带有提示的漂亮弹出窗口。它看起来像这样:

https://youtu.be/XfNNpktl_X8

我想为未破解的 Recapcha 制作相同的弹出窗口，但我不知道如何做。以下是 Recapcha block 的代码:

<div class="group-item element-fullwidth">
   <div class="form-group form-group-select-white text-left">
      <label id="g-capcha-label" for="g-capcha" class="form-label form-label-outside rd-input-label text-white-05">Захист</label>
      <div id="g-capcha" required name="recaptcha" class="g-recaptcha" data-sitekey="хххххххххххххххххххххххххххххх"></div>
   </div>
</div>

Recapcha 验证在发送表单之前进行，并且工作正常。代码如下:

function OnBeginBooking() {
   var v = grecaptcha.getResponse();
   if (v.length === 0) {
      //What should I write here?
      return false;
   } else {
      $(".loader").removeClass("hidden-loader");
      $("#bookingpanel").addClass("hidden-booking-button");
      return true;
   }        
}

谁能提供解决方案？是否可以调用div的CustomValidity()弹窗？或者也许还有其他选择？

Answer 1

嗯...由于没有答案，我制作了自己的弹出窗口。它看起来像这样:

https://youtu.be/SfdNPt2ST-U

也许有人会派上用场 - 这是代码:

CSS:

#toolTip {
    background-color: #ffffff;
    border: 1px solid;
    width: 170px;
    height: 40px;
    margin-left: 15px;
    position:absolute;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 6px 6px 12px -4px rgba(0,0,0,0.7);
    -moz-box-shadow: 6px 6px 12px -4px rgba(0,0,0,0.7);
    box-shadow: 6px 6px 12px -4px rgba(0,0,0,0.7);
    left: -3px;
    top: 80px;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
}

#toolTip span {
    position: absolute;
    padding:10px;
    font-family: sans-serif;
    font-size: 13px;
    color: #2b2b2b;
}

#toolTip img {
    margin-top: 6px;
    z-index:15;
    margin-left: 5px;
}

#arrow {
    background-color: #ffffff;
    border: 1px solid;
    border-bottom: none;
    border-right: none;
    width: 10px;
    height: 10px;
    position: absolute;
    top: -6px;
    left: 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
}

.tooltip-hidden {
    opacity:0;
}

HTML:

<div class="form-group form-group-select-white text-left">
                <label id="g-capcha-label" for="g-capcha" class="form-label form-label-outside rd-input-label text-white-05">Захист</label>
                <div id="g-capcha" required name="recaptcha" class="g-recaptcha" data-sitekey="6Lc2wSwUAAAAACLMEVOKUPoe0uhiZT-JNIBmYVMb"></div>
                <div id="toolTip" class="tooltip-hidden">
                    <img src="/images/alertiico.png" width="25" height="25">
                    <span>Відмітьте поле!!!</span>
                    <div id="arrow"></div>
                </div>
            </div>

JS(这是我的 Ajax 表单的 OnBegin 函数):

function OnBeginBooking() {
var v = grecaptcha.getResponse();
if (v.length === 0) {
    $("#toolTip").removeClass("tooltip-hidden");
    setTimeout(function () { $("#toolTip").addClass("tooltip-hidden") }, 2500);
        return false;
    }

}