個別記事のページです

2017年7月14日(金)
このエントリーをはてなブックマークに追加

ブラウザによって必須【required】が効かない時の対処法

こんにちは。更新管理担当のオカベです。
先日、メールフォームを作成した際にブラウザによってrequired属性が
効かず、必須の項目をスルーし、送信できてしまう現象がありましたので
メモ代わりに記録します。

まず、html5で新たに登場した、required属性ですが、主に、メールフォームでユーザーに
必ず入力してほしい箇所=必須にしたい箇所に一文字requiredを追加する。
例:<input type="text" name="名前" required>
お名前部分に何も入力せずそのまま送信しようとすると『このフィールドを入力して下さい』と警告がでます。

スクリーンショット (137).png

その、required属性ですが、中には効かないブラウザも有ります!!
それは、主にサファリブラウザです。

iphoneを使用している方はサファリブラウザを使っている方が多いのでは無いでしょうか?

ブラウザのバージョンによってもrequired属性が効く、効かないなどありますが
サファリでは、安定していないことは確かです。

また、IEのバージョンによっても対応していなかったりとhtml5は便利だけれども、
時にはブラウザでの対応の違いのせいで、知らず知らず、ユーザーやお客様に迷惑を
かけている事もあります...

そんなhtml5を各ブラウザに対応させるjsを発見!!
本当にこれは神だと思うくらい凄いです!
その名はwebshimと言うjsです!
以下のURLからダウンロードができます。
http://afarkas.github.io/webshim/demos/index.html
ダウンロード→出力させたい階層にアップ→<head></head>の間に
スクリプトを記述させる。
※階層は自分で変更して下さい。
<script src="js-webshim/minified/polyfiller.js"></script>
  <script> 
     webshim.activeLang('en');
     webshims.polyfill('forms');
     webshims.cfg.no$Switch = true;
  </script> 
※jsの警告については全て英語ですので各自で
中身を日本語へ変更して下さい。

無事インストール後、何をしてもスルーしていた必須が
webshimを入れた結果、しっかり警告をしてくれるようになりました。

required属性だけでなく、他のhtml5が効かないブラウザに遭遇したら
是非、試してみて下さい!


書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ