Google Form ブログ実装のためのバリデーションを考える

Google Form ブログ実装のためのバリデーションを考える


前記事の「Google Form を自前のフォームで実装」の記事で、フォームデータを Javascript から送信する際、送信ボタンのタイプを button にしたのですが、これですとブラウザ実装のバリデーションが効かなくなります。

で、HTML5から実装されたクライアントサイトのバリデーションがどんなものか調べてみました。



type=button ではバリデーションが効かない

HTML5 では、フォームの入力データのバリデーションをある程度クライアント(ブラウザ)サイドでできるようになっています。必須入力のフォームには、required としておけば入力を促すツールチップが表示されます。ただし、当たり前ですが、その場合、type="submit" じゃなければバリデーションが効きません。下の Codepen で試してみてください。何も入力せずに送信をクリックしますと、上の submit では「このフィールドを入力してください」とツールチップが出ますが、button では出ません。


(注)この下に Codepen のサンプルが表示されますが、読み込みに時間がかかる場合があります。

See the Pen Form validation by ausnichts (@ausnichts) on CodePen.


pattern=正規表現 が使える

更に指定タイプによって、たとえば、 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 追加」で試してみてください。ドメインにドットが入らないとエラーになるはずです。


前記事のコードを書き換える

<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})$" />
        </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 で「ありがとうメッセージ」を表示させています。
  • メールアドレスの完全なバリデーションは実際に送信してみるしかなく、そこまでやることもありませんので、「ありがとうメッセージ」内に入力されたメールアドレスを表示して確認できるようにしています。


ということで、フォームデータのバリデーションには使える機能がいろいろあるようです。

developer.mozilla.org


とりあえずは前に進んで、後は自動返信メールです。