個別記事のページです

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の常識
過度な営業は一切しておりません。
お問合せ