Как проверить reCaptcha с помощью плагина проверки формы jQuery, когда 2 формы присутствуют на одной странице? - PullRequest
Новая
       30

Как проверить reCaptcha с помощью плагина проверки формы jQuery, когда 2 формы присутствуют на одной странице?

1 голос
/ 29 февраля 2020

Итак, у меня есть одна страница с двумя языковыми переводами, один на румынском, а другой на английском sh. 2 перевода активируются / обслуживаются на странице с помощью кнопки jQuery добавления класса ' active ' к соответствующим элементам перевода перевода (без обновления страницы).

Я использую jQuery Плагин проверки формы для проверки форм. Проверка формы отлично работает на румынском переводе (вид по умолчанию, когда пользователь попадает на страницу). Основная проблема заключается в том, что когда пользователь нажимает кнопку перевода, чтобы активировать версию Engli sh, а затем предоставляет форму, grecaptcha.getResponse () возвращается пустой, в результате чего моя проверка формы Engli sh не отправлять.

Ниже приведены мои коды:

Румынская форма: 

    <form action="forms/contact-form-handler.php" method="POST" UTF-8 id="ro-form">
      <div class="columns is-variable is-2 is-multiline">
        <div class="column is-half">
          <input class="input" type="text" name="name" placeholder="Nume si prenume" id="ro-name">
        </div>
        <div class="column is-half">
          <input class="input" type="email" name="email" placeholder="Email" id="ro-email">
        </div>
        <div class="column is-half">
          <input class="input" type="text" name="phone" placeholder="Telefon" id="ro-phone">
        </div>
        <div class="column is-half">
          <input class="input" type="text" name="budget" placeholder="Buget">
        </div>
        <div class="column is-full">
          <textarea class="textarea" name="message" placeholder="Message" id="ro-message"></textarea>
        </div>
        <div class="column is-half">
          <div class="g-recaptcha" data-sitekey="my_key_here"></div>
          <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
          <button type="submit" class="button is-warning"><span class="send-btn">Send message</span></button>
        </div>  
      </div>
    </form>

Engli sh Форма: 

    <form action="forms/contact-form-handler.php" method="POST" UTF-8 id="en-form">
      <div class="columns is-variable is-2 is-multiline">
        <div class="column is-half">
          <input class="input" type="text" name="name" placeholder="Name">
        </div>
        <div class="column is-half">
          <input class="input" type="email" name="email" placeholder="Email" id="en-email">
        </div>
        <div class="column is-half">
          <input class="input" type="text" name="phone" placeholder="Phone">
        </div>
        <div class="column is-half">
          <input class="input" type="text" name="budget" placeholder="Budget">
        </div>
        <div class="column is-full">
          <textarea class="textarea" name="message" placeholder="Message"></textarea>
        </div>
        <div class="column is-half">
          <div class="g-recaptcha" data-sitekey="my_key_here"></div>
          <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
          <button type="submit" class="button is-warning"><span class="send-btn">Send message</span></button>
        </div>  
      </div>
    </form>

jQuery Экземпляр проверки: 

$(function() {
  // Validate Romanian Form
  $("#ro-form").validate({
    ignore: ".ignore",
    rules: {
      name: "required",
      phone: "required",
      email: {
        required: true,
        email: true
      },hiddenRecaptcha: {
          required: function () {
              if (grecaptcha.getResponse() == '') {
                  return true;
              } else {
                  return false;
              }
          }
      }
    },
    messages: {
      name: "Please enter your name",
      phone: "Please enter your phone number",
      email: "Please enter a valid email address"
    },
    submitHandler: function(form) {
      form.submit();
    }
  });

  // Validate Romanian Form
  $("#en-form").validate({
    ignore: ".ignore",
    rules: {
      name: "required",
      phone: "required",
      email: {
        required: true,
        email: true
      },hiddenRecaptcha: {
          required: function () {
              if (grecaptcha.getResponse() == '') {
                  return true;
              } else {
                  return false;
              }
          }
      }
    },
    messages: {
      name: "Please enter your name",
      phone: "Please enter your phone number",
      email: "Please enter a valid email address"
    },

    submitHandler: function(form) {
      form.submit();
    }
  });
});

Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 29 февраля 2020

Хорошо, вот что я сделал после того, как собрал фрагменты информации, я наткнулся на Джин Келли , обсуждая, как можно ссылаться на каждый экземпляр recaptcha с помощью grecaptcha.getResponse (0), grecaptcha.getResponse ( 2) и так далее. Поэтому я искал, как создать несколько экземпляров и наткнуться на ответ turboL oop, где вы могли бы создать recaptcha с явным рендерингом.

Итак, вот моя новая структура кода:

Мое новое поле recaptcha в переводе 2 : 

<div class="column is-half">
  <div class="g-recaptcha"></div>
  <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha">
  <button type="submit" class="button is-warning"><span class="send-btn">Send message</span></button>
</div>

Скрипт для создания отрисовок из ответа turboL oop : 

var CaptchaCallback = function() {
  var captchas = document.getElementsByClassName("g-recaptcha");
  for(var i = 0; i < captchas.length; i++) {
    grecaptcha.render(captchas[i], {'sitekey' : 'my_site_key'});
  }
};

Загрузить скрипт с явным рендерингом : 

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

jQuery Плагин проверки формы:

Румынский div: 

...
},hiddenRecaptcha: {
    required: function () {
      if (grecaptcha.getResponse(0) == '') {
        return true;
      } else {
        return false;
      }
    }
}
...

Engli sh div: 

...
},hiddenRecaptcha: {
    required: function () {
      if (grecaptcha.getResponse(1) == '') {
        return true;
      } else {
        return false;
      }
    }
}
...

Так что теперь, когда активен второй перевод, grecaptcha.getResponse () возвращает значение, так как оно ссылается на второй экземпляр / визуализации.

0 голосов
/ 29 февраля 2020 
<form action="forms/contact-form-handler.php" method="POST" UTF-8 id="form">
 <input type="text" class="hidden" id="language" value="1" />
  <div class="columns is-variable is-2 is-multiline">
    <div class="column is-half">
      <input class="input" type="text" name="name" placeholder="Name">
    </div>
    <div class="column is-half">
      <input class="input" type="email" name="email" placeholder="Email" >
    </div>
    <div class="column is-half">
      <input class="input" type="text" name="phone" placeholder="Phone">
    </div>
    <div class="column is-half">
      <input class="input" type="text" name="budget" placeholder="Budget">
    </div>
    <div class="column is-full">
      <textarea class="textarea" name="message" placeholder="Message"></textarea>
    </div>
    <div class="column is-half">
      <div class="g-recaptcha" data-sitekey="my_key_here"></div>
      <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
      <button type="submit" class="button is-warning"><span class="send-btn">Send message</span></button>
    </div>  
  </div>
</form>

, затем вы можете проверить ввод с id = 'language', если value = 1, заменить местозаполнитель на Engli sh иначе, если value = 0, заменить местозаполнитель на румынский. 

$(function() {
       $("your change button").onClick(()=>{
           $("#language").val('0') // or 1
            //write function to change all input to Romanian or English language
            //sample : $('#en-email').attr("placeholder", "Email"); 
         })
     });
...