web-dev-qa-db-ja.com

reCAPTCHAの前のHTML5フォーム検証

新しい非表示のreCAPTCHA（v2）フレームワークを統合しました。デフォルトでは、送信ボタンのclickイベントでユーザーを検証します。ただし、このイベントは組み込みのHTML5フォーム検証の前にトリガーされます。期待どおりの順序で作成する方法を探しています。最初にフォームの検証を行い、次にreCAPTCHAを行います。

html5recaptchahtml5-validation
25
Julio Guerra

新しいv2 grecaptchaメソッド：grecaptcha.execute()のおかげで、プログラムでこれを行う必要があります。そのため、recaptchaは、デフォルトのHTML5フォーム検証を妨げていたボタンのデフォルトクリックイベントを置き換えません。

イベントパスは次のとおりです。

  1. 送信ボタンクリックイベント：ブラウザーの組み込みフォーム検証
  2. フォーム送信イベント：grecaptcha.execute()を呼び出します
  3. reCAPTCHAコールバック：フォームを送信します
$('#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>
32
Julio Guerra

こんにちは、ここで実用的なソリューションを入手しました。目に見えない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>
4
Maxime

HTML5検証+ Invisible 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();
    });
  })
4
ByScripts

私は同じ動作を望んでいましたが、新しい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を使用しますが、recaptchaによって呼び出されると、passedという名前のデータ変数を設定し、フォームを許可します。妨げられないように。これは、recaptchaが通常行うのとまったく同じ動作ですが、その条件があります。

更新：コードを再度見ると、おそらくgrecaptchaの実行後にfalseに渡されたデータを復元する方法が必要であることを思い出します。これを実装する場合を考慮してください。

2
giovannipds
 let siteKey = "...";
 $("form").submit(function (eventObj) {
        var myForm = this;
        eventObj.preventDefault();
        grecaptcha.execute( siteKey, {
            action: "submit"
        })
            .then(function (token) {
                $('<input />').attr('type', 'hidden')
                    .attr('name', "g_recaptcha_response")
                    .attr('value', token)
                    .appendTo(myForm);
                myForm.submit();
            });
    });

これにより、recapchaが実行され、応答を待機し、ブラウザが送信しようとしてから実際に送信するときに、非表示属性g_recaptcha_responseを任意のフォームに追加します。グローバル変数siteKeyが必要です

0
Zoran

デフォルトのメソッドがhtml5フォーム検証をオーバーライドするように見えるため、この問題が発生しました。また、関数/要素名をハードコーディングするのではなく、すべてのコードを汎用的にしたかった。最後に、v3 apiを使用して次のコードを思い付きました-

HTML

<form method="post" action="?" class="ui-recaptcha" name="my_form_name">
   ...
   <input type="submit" value="Submit">
</form>
<script src="//www.google.com/recaptcha/api.js?render={key}" async defer></script>

Javascript（jQueryを使用していますが、Vanilla jsに簡単に適応できます）

$('.ui-recaptcha').submit(e => {

    var form = e.target;

    if( $(form).data('recaptcha-done') )
        return;

    e.preventDefault();
    grecaptcha.execute('{key}', {'action': $(form).attr('name')}).then(token => {

        $(form).append($('<input>').attr({'type': 'hidden', 'name': 'g-recaptcha-response', 'value': token}));
        $(form).data('recaptcha-done', true);
        $(form).submit();
    });
});

上記のいくつかの例のようにsubmitを呼び出すだけでループが発生することがわかりました。これは、submitイベントでrecaptchaハンドラーが実行されるのを見ると意味があります。

これは、任意のui-recaptchaフォームに対してrecaptchaを実行し、フォームname属性をreCaptchaコンソールで表示できるアクションとして渡し、トークンをフォームに挿入します。実行されると、フォームのデータ属性が設定されるため、submitの再帰呼び出しはrecaptchaを再度実行しようとしません。

0
USD Matt