Htykuut

I have two forms on a single page, one of them is a login form and the other is a register form (two tabs) and I want to check the the captchas, but when I click the check captcha from register form I can't login.

The login form:

HTML:

<div id="loginUserTab" class="tab-pane fade">

  <form>

    <div class="form-group login-width-100">

      <label for="id_number" class="m-rtl-label"><span class="requiredMark">*</span>passport number:</label>

      <input type="text" class="form-control" id="pNo" name="pNo" data-validetta="required,minLength[10],maxLength[10]" lang="fa" style="text-align: left;">

    </div>

    <div class="form-group login-width-100">

      <label for="mNumber" class="m-rtl-label"><span class="requiredMark"></span>  telephone :</label>

      <input type="text" class="form-control" id="tNumber" name="tNumber" data-validetta="required,minLength[11],maxLength[11]" lang="fa" style="text-align: left;">

    </div>

    <div class="form-group" style="float:right;padding-right: 20px;">

      <div class="g-recaptcha" data-sitekey="...."></div>

    </div>

    <div class="form-group login-width-100">

      <button type="submit" class="btn btn-primary colorGreenBTN">login</button>

    </div>

  </form>

</div>

JS:

var v = grecaptcha.getResponse();

if (v.length == 0) {

  alert("fill the form");

  return;

} else if (!$("#Terms").prop("checked")) {

  alert("check the rules");

}

Simplest Way to validate as much g-captcha validate

Hope you have included api.js before </head> tag as per below

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit"></script>

Your HTML Code looks like below

<div class="g-recaptcha-contact" data-sitekey="Your Site Key" id="RecaptchaField2"></div>

<input type="hidden" class="hiddenRecaptcha" name="ct_hiddenRecaptcha" id="ct_hiddenRecaptcha">



<div class="g-recaptcha-quote" data-sitekey="Your Site Key" id="RecaptchaField1"></div>

<input type="hidden" class="hiddenRecaptcha" name="qt_hiddenRecaptcha" id="qt_hiddenRecaptcha">

After you add this code in footer with tag

var CaptchaCallback = function() {

    var widgetId1;

    var widgetId2;

    widgetId1 = grecaptcha.render('RecaptchaField1', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_quote});

    widgetId2 = grecaptcha.render('RecaptchaField2', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_contact});

};

var correctCaptcha_quote = function(response) {

    $("#qt_hiddenRecaptcha").val(response);

};

var correctCaptcha_contact = function(response) {

    $("#ct_hiddenRecaptcha").val(response);

};

And Last easy step for developer add Jquery Validation as per below

$("#form_id").validate({

    ignore: ,

    rules: {

        ct_hiddenRecaptcha: { required: true, },

        qt_hiddenRecaptcha: { required: true, },

    },

});

If you have same class for both the forms, you can use it to validate above.