DEV.KAOLLOVE.JP ～日々の技術的なメモ～

入力フォームの入力チェックを自動でする仕組み

https://github.com/koitoyou/multi-form-checker

ほんとは流行りのフレームワークを導入したりするのがスジなんだろうけど、ものおぼえが悪すぎて学習コストがかかりすぎてしまうので、簡単なものをつくれないかなと試してみた。

  <form id="auto-check-form" onsubmit="return test('#auto-check-form');">
    <table>
      <tbody>
        <tr>
          <th colspan="2">必須</th>
          <th colspan="2">任意</th>
        </tr>
        <tr>
          <th><label for="input-01">入力項目01<b class="required">（必須）</b></label></th>
          <td>
            <input type="text" name="input-01" data-required="true"><br>
            <p class="error-message error-message-required input-01" style="display:none">入力項目01を入力してください。</p>
          </td>
    (略)
  <script src="./formutils.js"></script>

主な仕様

• 「formsutils.js」をインクルード
• 必須項目にはinputタグに「data-required="true"」属性をつける
• 必須エラーのときに表示するメッセージには、「error-message-required」クラスとフォーム名(name)のクラスをつけておく。予め表示されているとおかしいので、display:noneで消しておく