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するときに、ファイルが選択していなければ、以下の様な表示がされ、アップロードできなくなる。なんて便利なんだろう。

ちなみに、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>