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>

コメント

タイトルとURLをコピーしました