Проверка формы HTML5 до того, как reCAPTCHA's

Question

Я включил новую скрытую структуру reCAPTCHA (v2), которая по умолчанию проверяет пользователя с событием click кнопки отправки. Но это событие запускается до проверки встроенной формы HTML5. Я ищу способ сделать это в ожидаемом порядке: сначала выполните валидацию, а затем повторите проверку.

Answer 1

Вы должны сделать это программно благодаря новому методу v2 grecaptcha: grecaptcha.execute(), чтобы recaptcha не заменил событие нажатия кнопки по умолчанию, которое препятствовало проверке формы HTML5 по умолчанию.

Путь событие:

1. Отправить нажатие кнопки событие: браузер встроенный в проверке формы
2. Форма отправить событие: вызов grecaptcha.execute()
3. рекапчи обратного вызова: отправить форму

$('#form-contact').submit(function (event) { 
 
    event.preventDefault(); 
 
    grecaptcha.reset(); 
 
    grecaptcha.execute(); 
 
    }); 
 

 
function formSubmit(response) { 
 
    // submit the form which now includes a g-recaptcha-response input 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.google.com/recaptcha/api.js"></script> 
 
<form action="?"> 
 
    <div class="g-recaptcha" 
 
     data-sitekey="your-key" 
 
     data-size="invisible" 
 
     data-callback="formSubmit"> 
 
    </div> 
 
    <button type="submit">Submit</button> 
 
</form>

Answer 2

Я хотел получить то же поведение, но с помощью новой recaptcha, невидимой. После того, как смотреть на некоторый код и тестирование некоторые вещи, я попал в это:

var contact_form; 
$(function() { 
    contact_form = $('#contact-form'); 
    contact_form.submit(function (event) { 
     if (! contact_form.data('passed')) { 
      event.preventDefault(); 
      grecaptcha.execute(); 
     } 
    }); 
}); 
function sendContactForm(token) { 
    contact_form.data('passed', true); 
    contact_form.submit(); 
} 

Это в основном хранит объект формы JQuery в глобальной переменной, в том числе, он использует sendContactForm как обратный вызов, но при вызове рекапчи, он устанавливает переменную данных с именем passed, что позволяет предотвратить ее отсутствие. Это то же самое поведение, что и recaptcha, но с этим условием.

Пожалуйста, подумайте об изменении принятого вами ответа, в котором ИМХО, это не очень хорошо. Конечно, ничего личного, просто аргументов. С наилучшими пожеланиями.

Answer 3

Вот мое решение, чтобы получить HTML5 проверки + Невидимый ReCaptcha:

HTML:

<form id="my-form"> 
    <!-- Your form fields ... --> 
    <div class="g-recaptcha" 
     data-sitekey="..." 
     data-callback="submitMyForm" 
     data-size="invisible"> 
    </div> 
    <button type="submit">Submit</button> 
</form> 

JS:

var myForm = $('my-form'); 

function submitMyForm() { 
    myForm.trigger('submit', [true]); 
} 

$(function() { 
    myForm.on('submit', function (e, skipRecaptcha) { 
     if(skipRecaptcha) { 
      return; 
     } 

     e.preventDefault(); 
     grecaptcha.execute(); 
    }); 
    }) 

Answer 4

Привет получил рабочее решение здесь. Работа с невидимым Recaptcha.

jQuery(document).ready(function() { 
 
    var commentform = jQuery("#commentform"); 
 
    commentform.on("click", "#submit-comment", function(e) { 
 
     if(commentform[0].checkValidity()) { 
 
     e.preventDefault(); 
 
     grecaptcha.execute(); 
 
     } 
 
    }); 
 
}); 
 

 
function submitCommentForm(data) { 
 
    document.getElementById("commentform").submit(); 
 
}

<form action="blaba.php" method="post" id="commentform" class="comment-form"> 
 
    <div class="form-submit"> 
 
    <div data-callback="submitCommentForm" data-sitekey="yourkey" class="g-recaptcha" data-size="invisible"> 
 
    <button id="submit-comment">Leave a comment</button> 
 
    </div> 
 
</form>