CODEWITHSUNDEEP
javascripthtmlasp.netvalidationrecaptcha
P_Soltys
P_Soltys

Reputation: 58

Popup warning for Recaptcha

I have Ajax form.

The form fields on the client side are validated using HTMLSelectElement.setCustomValidity(). And everything works fine. When an error occurs, the browser displays a nice pop-up window with a hint. It looks like this:

https://youtu.be/XfNNpktl_X8

I want to make the same popup window for unchacked Recapcha, but I do not know how. Here's the code for the 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 validation occurs before the form is sent and also works fine. Here's the code:

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;
   }        
}

Who can advise the solution? Is it possible to call the CustomValidity () popup window for div? Or maybe there is an alternative?

Upvotes: 0

Views: 362

Answers (1)

P_Soltys
P_Soltys

Reputation: 58

Well ... Since there were no answers, I made my own pop-up. It looks like this:

pop-up

https://youtu.be/SfdNPt2ST-U

Maybe someone will come in handy - here is the code:

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 (this is OnBegin-function for my Ajax-form):

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

}

Upvotes: 1

Related Questions