html5 - 設置 - メール フォーム captcha




reCAPTCHAの前にHTML5フォームの検証 (4)

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();
    });
  })

私はデフォルトで、送信ボタンのclickイベントでユーザを検証する新しい隠しreCAPTCHA(v2)フレームワークを統合しました。 しかし、このイベントは組み込みのHTML5フォームの検証の前にトリガーされます。 私は期待された順序でそれを作る方法を探しています:最初にフォームの検証、reCAPTCHAの後に。


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

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

  1. 送信ボタンのクリックイベント:ブラウザのビルトインフォームの検証
  2. フォーム送信イベント:call 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>


私は同じ動作を望んでいたが、新しい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フォームオブジェクトをグローバルvarに格納します。たとえば、 sendContactFormをコールバックとして使用しますが、recaptchaによって呼び出されると、渡されたデータvarがpassedれます。 これは、recaptchaが通常行うのとまったく同じ動作ですが、その状態です。

更新 :私のコードを見直してみると、grecaptchaの実行後にfalseに渡されたデータを復元する方法が必要かもしれないことを思い出させる。 これを実装する場合は、それを考慮してください。


 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が必要です







html5-validation