Love澤's Room

管理人のシステム開発奮闘記。更新頻度はそこまで高く無いと思います。いまのところ、技術ネタのみを記録中。今後もしかしたら、普通のブログのように、色々と書いていくかも。

HTML 5でformの入力チェックを簡単に行う方法

(7月29日 文章を少し修正しました。)

現在、ある事情で、PDFをアップロードしてPNG画像に変換するシステムを作っている。(作っているといっても、だいそれたことはしていないのだけど。)

そこで、PDFファイルをアップロードする簡易フォームを用意した。もちろん、PDFファイルの選択は必須であり、ファイルが選択されていなければ何らかのアラートを出し、その旨をユーザに知らせたい。

通常、HTMLとPHPを用いるだけだと、アップロードボタンを押した後はページが推移し、
  ファイルがアップロードされていたらその旨の、
  ファイルがアップロードできなかったその旨の
メッセージが「遷移先のページ」で表示される。

ここで、JavaScriptを使用することで、ページ遷移前にアラートを出すことが可能になる。というか、そうしたい場合、これまではJavaScriptが必須だったようだ。

しかし、HTML 5になってから、HTML 5自体で、フォームをチェック出来るようになった。前置きが長くなったが、早速使ってみた。

実装は非常に簡単。"required"という文を加えるだけ。

<input type="file" name="pdf_file" required>

これだけで、submitするときに、ファイルが選択していなければ、以下の様な表示がされ、アップロードできなくなる。なんて便利なんだろう。
f:id:love_zawa:20140727083929p:plain

ちなみに、selectについては、optionにまでrequireを付ける必要はなく、親となるselectにだけつければOK.

<select id = "selector" required>
    <option value="" selected>▼選択</option>
    <option value="apple">りんご</option>
    <option value="grape">ぶどう</option>
    <option value="mango">マンゴー</option>
</select>