reCAPTCHA v3を設置したところHTMLフォームのrequiredやtype、pattern属性のようなバリデーションが効かなくなった。「未入力ですよ」や「パターンにマッチしていません」、「メールアドレスに@を挿入してください」といったブラウザのポップアップが表示されずに画面が遷移してしまうのだ。それもそのはず、公式ドキュメント通りの設置方法だと、ブラウザがHTML5のフォームバリデーションを行う以前に、フォームの内容がJavaScript経由でsubmitされるためである。
ということで設置コードを一部改善し、.submit()前にHTML5フォームバリデーションが呼び出されるようにした。
<form method="post" id="contactForm">
<input type="email" required />
<button class="g-recaptcha"
data-sitekey="ooooooooooooooo"
data-callback='onSubmit'
data-action='submit'>送信</button>
</form>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function onSubmit( token ) {
var form = document.getElementById('contactForm');
if ( form.reportValidity() ) {
form.submit();
}
}
</script>
.reportValidity()を呼び出している点がミソである。これはフォーム要素内の子要素(inputやtextareaなど)がHTML5バリデーションの要件を満たしているか否かをtrueとfalseで返してくれるありがたい函数である。これによりJS経由で.submit()する前に各入力フォームが要件(requiredやtype属性の要件)を満たしているかをチェックでき、reCAPTCHA v3を導入してもフォームのバリデーションがクライアントサイドでもきちんと動くようになったのでした。
なお.reportValidity()は比較的新しいブラウザのみ対応している模様。先日現役引退されたInternet Explorerさまはもちろん、Microsoft Edgeも比較的以前のバージョンだと非対応である点に注意いただきたい。ただ、Polyfillを公開されている方も居るので対応ブラウザ枠を増やしたいケースならば活用して行きたい。
とは言えこれもあくまでユーザビリティへの配慮であるため、きちんとバックエンドでもバリデーションを実装した、セキュアな素晴らしいWebコンテンツにして行きたい所存。
200
200
72
72