проверка формы reCAPTCHA и JS - PullRequest
Новая
       4

проверка формы reCAPTCHA и JS

0 голосов
/ 04 октября 2018

Я новичок в 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 При использовании 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 couldn't find user-provided function: 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>

Живая версия здесь .

Когда я использую data-callback="onSubmit", у меня в консоли появляется эта ошибка Uncaught (in promise) nullИ если я использую data-callback="dataFallback" у меня эта ошибка ReCAPTCHA couldn't find user-provided function: dataFallback

1 Ответ

0 голосов
/ 04 октября 2018

Для невидимой 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>

Это будет обрабатывать проверку, которую вы пытаетесь достичь,Если вы все еще хотите сделать это по-своему, я могу помочь вам разобраться с этим, но я считаю, что вышеуказанный способ является наиболее неинвазивным для вашего кода

...