Google Form ブログ実装のためのバリデーションを考える
前記事の「Google Form を自前のフォームで実装」の記事で、フォームデータを Javascript から送信する際、送信ボタンのタイプを button にしたのですが、これですとブラウザ実装のバリデーションが効かなくなります。
で、HTML5から実装されたクライアントサイトのバリデーションがどんなものか調べてみました。
01type=button ではバリデーションが効かない
HTML5 では、フォームの入力データのバリデーションをある程度クライアント（ブラウザ）サイドでできるようになっています。必須入力のフォームには、required としておけば入力を促すツールチップが表示されます。ただし、当たり前ですが、その場合、type="submit" じゃなければバリデーションが効きません。下の Codepen で試してみてください。何も入力せずに送信をクリックしますと、上の submit では「このフィールドを入力してください」とツールチップが出ますが、button では出ません。
（注）この下に Codepen のサンプルが表示されますが、読み込みに時間がかかる場合があります。
See the Pen Form validation by ausnichts (@ausnichts) on CodePen.
02pattern=正規表現 が使える
更に指定タイプによって、たとえば、 type="email" を指定しておきますと、メールアドレスかどうかのチェックもしてくれます。ただし、かなりゆるいです。上の Codepen にいろいろ入力してみてください。
試してみたところでは、「文字列@文字列」であれば、ドメインにドットがなくても通ってしまうようです。
これでは使いものになりませんが、さらに pattern属性というものがあり、これには正規表現も使えるらしく、それならばということで、pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" を追加してみました。
Codepen の「pattern 追加」で試してみてください。ドメインにドットが入らないとエラーになるはずです。
03前記事のコードを書き換える
<script> function showThxMessage(){ var email = document.myForm.elements['entry..**********'].value; if(email !== ''){ var thxDiv = document.getElementById('thxMessage'); thxDiv.getElementsByTagName('span')[0].innerHTML = email; document.myForm.reset(); document.getElementById('formWrapper').style.display = 'none'; thxDiv.style.display = 'block'; } } </script> <div id="formWrapper"> <form action="****(略)****" method="post" name="myForm" target="dummyIframe"> <div> <label>お名前：</label> <input type="text" name="entry..**********" value="" required /> </div> <div> <label>メールアドレス：</label> <input type="email" name="entry..**********" value="" required pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})quot; /> </div> <div> <label>お問い合わせ内容：</label> <textarea required name="entry..**********"></textarea> </div> <div> <input type="submit" value="送信"> </div> </form> <iframe name="dummyIframe" style="display:none;" onload="showThxMessage()"></iframe> </div> <div id="thxMessage" style="display:none;"> お問い合わせありがとうございました。<br /> <span style="color:red;"></span> あてのメールでお答えしたします。<br /><br /> また自動返信メールをお送りいたしましたのでご確認ください。<br /> 届いていない場合はお答えメールも届きませんので、迷惑メールとなっていないかなどご確認ください。</div>
- 送信ボタンのタイプを
submitに戻し、バリデーションは全てブラウザ依存とし、通常のまま送信します。 - 送信完了ページをダミーの
iframeで受け、onloadで「ありがとうメッセージ」を表示させています。 - メールアドレスの完全なバリデーションは実際に送信してみるしかなく、そこまでやることもありませんので、「ありがとうメッセージ」内に入力されたメールアドレスを表示して確認できるようにしています。
ということで、フォームデータのバリデーションには使える機能がいろいろあるようです。
とりあえずは前に進んで、後は自動返信メールです。