テック

HTML5で入力項目をValidation（検証）する方法

2022年10月9日 by single コメントはまだありません

HTML5で入力項目をValidation（検証）する方法

サンプル

入力項目チェック

性別 (選択必須)

規約 (選択必須)

生年月日 (選択必須)

利用開始年月 (選択必須)

登録日時 (選択必須)

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>HTML5 Validation demo(1)</title>
  <style type="text/css">
   textarea:invalid+span:after
  ,input:invalid+span:after {
    position: absolute;
    content: '✖';
    padding-left: 5px;
  }
   textarea:valid+span:after
  ,input:valid+span:after {
    position: absolute;
    content: '✓';
    padding-left: 5px;
  }
  textarea:invalid,input:invalid {
    border: red solid 3px;
  }
  </style>
</head>
<body>
  <form id="myForm" method="get" action="#">
    <fieldset>
      <legend>入力項目チェック</legend>
      <p>
        <label for="fullname">名前 (入力必須, ２文字以上入力してください)</label>
        <input id="fullname" name="fullname" minlength="2" type="text" required /><span></span>
      </p>
      <p>
        <label for="alphabet">ローマ字 (入力必須, ３文字以上入力してください)</label>
        <input id="alphabet" name="alphabet" minlength="3" type="text" pattern="[0-9 A-Za-z]+$" required /><span></span>
      </p>
      <p>
        <span>性別 (選択必須)</span>
        <input id="male"   name="gender" type="radio" required /><label for="male">男</label>
        <input id="female" name="gender" type="radio" required /><label for="female">女</label>
      </p>
      <p>
        <span>規約 (選択必須)</span>
        <input id="agree"  name="agree" type="checkbox" required /><label for="agree">同意する</label>
      </p>
      <p>
        <span>生年月日 (選択必須)</span>
        <input id="birthday"  name="birthday" type="date" min="1950-01-31" required /><span></span>
      </p>
      <p>
        <span>利用開始年月 (選択必須)</span>
        <input id="startmonth"  name="startmonth" type="month" min="2022-06" max="2022-11" required /><span></span>
      </p>
      <p>
        <span>登録日時 (選択必須)</span>
        <input id="registrationtime"  name="registrationtime" max="2022-12-31T12:30" type="datetime-local" required /><span></span>
      </p>
      <p>
        <label for="email">E-mail (入力必須)</label>
        <input id="email" type="email" name="email" required><span></span>
      </p>
      <p>
        <label for="homepage">URL (入力任意)</label>
        <input id="homepage" type="url" name="homepage"><span></span>
      </p>
      <p>
        <label for="height">身長(cm) (入力必須)</label>
        <input id="height" type="number" name="height"  step="0.1" min="50" max="250" required><span></span>
      </p>
      <p>
        <label for="comment">コメント (入力必須)</label>
        <textarea id="comment" name="comment" required></textarea><span></span>
      </p>
      <p>
        <input class="submit" type="submit" value="送信">
      </p>
    </fieldset>
  </form>
  <script type="text/javascript">
    var form = document.querySelector("#myForm");
    form.addEventListener("submit", function(){
      alert('チェックOK');
    })
   </script>
</body>
</html>

デモ

入力チェック（Validation：検証)をHTML5で実装する方法

インプットチェックはJavascriptでがっちり実装するものだと思うかもしれませんが、HTMLだけでそこそこチェックできます。実装方法を紹介します。

必須チェック

Inputタグに『required』属性を設定すれば、項目を必須とすることができます。

 <input type="text" required>

入力、または、選択されていない場合には、エラーメッセージが表示されるようになります。

このメッセージはブラウザで表示されるもので、ブラウザによって表示されるメッセージは異なります。当然、ご使用のブラウザの言語によっても、表示される言語が変わります。

文字数チェック

属性『minlength』と『maxlength』を設定することで、最小文字数と最大文字数を制御できます。

<input type="text" minlength="2" maxlength="10" required />

maxlengthを超えて入力できないので、エラーメッセージは表示されませんが、minlength未満の場合は、エラーメッセージが表示されます。

文字種チェック

テキストボックスに入力可能な文字種類も制御できます。

制御するには属性「pattern」を指定し、正規表現で入力可能文字列を定義できます。

例えば、英字小文字で４～８文字以内で入力させたい場合には以下のようになります。

<input type="text" pattern="[a-z]{4,8}" required />

パターンに合わなければエラーメッセージが表示されます。

数値のみに入力を限定する

inputのtypeに『number』とすれば、入力を数値のみに限定できます。

最大値を設定

最大値を設定するには属性「max」を指定してください。

最小値を設定する

最小値を設定するには属性「min」を指定してください。

小数値を入力可能にさせる

type「number」の場合、デフォルトでは小数値を設定できません。入力可能にさせるには「step」（増分値）を小数第１位にするには「0.1」としてください。

<input type="text" step="0.1" min="50" max="250" />

メールアドレスチェック

inputのtypeに『email』とすれば、入力文字形式をメールアドレス形式であるかどうかをチェックしてくれます。

実際のチェックは、英数字で、かつ、アットマークが含まれていて、適切な位置にあるかをチェックしています。また記号があればNGとなっています。

チェックNGの場合にはエラーメッセージが表示されます。

URLチェック

inputのtypeに『url』とすれば、入力文字形式をURL形式であるかどうかをチェックしてくれます。

先頭に「http://」や「https://」がなければ、NGとなります。

検証結果に合わせてスタイルを変更するには？

スタイルシートを利用すれば、検証結果にあわせて、色を変えたり、文字を変えたりすることができます。

スタイルシートのサンプル

スタイルシート

まず、以下のようなスタイルシートを準備してください。

『:invalid』は検証結果NGの場合に適用されるプロパティです。

『:valid』は検証結果OKの場合に適用されるプロパティです。

  <style type="text/css">
   textarea:invalid+span:after
  ,input:invalid+span:after {
    position: absolute;
    content: '✖';
    padding-left: 5px;
  }
   textarea:valid+span:after
  ,input:valid+span:after {
    position: absolute;
    content: '✓';
    padding-left: 5px;
  }
  textarea:invalid,input:invalid {
    border: red solid 3px;
  }
  </style>

HTMLマークアップ

次にinputタグの次に「span」タグに設定することで検証結果を反映できます。

<input type="text" required /><span></span>

ご参考

関連ページ