バリデーションとは？

ユーザーがフォームに入力した値が正しい値かどうかをチェックすることです。
例えば、「input type=”email”」は@が含まれているか判定していて、形式が正しくない状態で送信を押すとエラーが表示されます。

下記の入力フォームでは、3桁-4桁の数字、または、7桁の数字の形式以外で入力し、「送信ボタン」を押すと、「指定されている形式で入力してください。」というエラーが表示されます。

バリデーションが正常に動いています。

バリデーションが動かない例

バリデーションが正常に動いていない場合、エラーが表示が出ません。

原因

過去2回、苦しめられました。
pattern=””の書き方？required？javascript？
何がいけないのか？
javascriptであれこれ書いてもエラー表示は出てこないまま。
こういう時は決まって、しょーもないことなんです。。。

そして、はぁ？何がダメなの！？と諦めかけた時に思い出すんです。

<input type="button" value="送信">

おわかりだろうか？

input type=””が、「button」なのだ。

そう、バリデーションが動かすには、input type=”submit”なんです。

修正後

HTML
<form>
郵便番号（ハイフンの有無は問いません）
<input type="text" name="郵便番号" placeholder="000-0000" pattern="\d{3}-?\d{4}" required="">
<input type="submit" value="送信">
</form>

実装結果

もう2度と忘れない、そして騙されないぞ！！
（注意：他の原因がある場合もあるかもしれません。）

他にもあるよ。関連記事

• 【CSS】とにかく便利！Flexbox。その1：基本編
• 【jQuery】可視領域に入ると蛍光ペンが伸びるアニメーション
• 【CSS】CSSだけで線をグラデーションにする方法（border、背景+疑似要素）