IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

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

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

2018/05/11 Google, javascript, WebTips, はてなブログ

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

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

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

  • type=button ではバリデーションが効かない
  • pattern=正規表現 が使える
  • 前記事のコードを書き換える

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

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

Google Form を自前のフォームで実装(はてなブログで完全カスタマイズ可)
Adsense から「ポリシー違反」の警告がきた~映画の予告編がアダルトコンテンツだった!?
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/27

WordPress:Fetch(Ajax)でお問い合わせフォーム(プラグインなし)

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress66
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com