フォームの入力チェック

業界初!サーバプログラム制御不要!
HTML5のカスタムデータ属性(data-*)を利用しサーバサイドで実行可能な入力チェック機能が構築できます。

バリデーションロジック不要

ウェブ上で入力フォームを作成し、数値チェック、全角チェックなど入力チェックをするには、従来方式ではサーバープログラムでバリデーションロジックを埋め込まなければなりません。
WebBoardは、HTML5のカスタムデータ属性(data-*)にバリデーションルールを記述するだけで自動的にサーバ内で入力チェックを実現することが可能です。
これにより開発コストの大幅削減が可能となります。

バリデーションエラーを検地した場合は、REFERER URLに設定されている遷移元画面に自動的に戻されます。

<form class="
                    wb-form-wb_inquiry" method="POST" action="./inquiry_confirm.html">
    <div id="inquiry">
        <table>
            <colgroup>
                <col class="per35">
                <col class="per65">
            </colgroup>
            <tr>
                <th>会社名</th>
                <td>
                    <input type="text" name="company_name" size="49"
                    data-label="会社名">
                </td>
            </tr>
            <tr>
                <th>名前<font color="#eb6100"> ※</font></th>
                <td>
                    <input type="text" name="name" size="49"
                    data-label="名前"
                    data-required="true">
                  <div class="
                    wb-formerrmsg-name" style="color:red;"></div>
                </td>
            </tr>
            <tr>
                <th>メールアドレス<font color="#eb6100"> ※</font></th>
                <td><input type="text" name="email" style="ime-mode:disabled;" size="49"
                    data-label="メールアドレス"
                    data-required="true">
                <div class="
                    wb-formerrmsg-email"   style="color:red;"></div>
                </td>
            </tr>
            <tr>
                <th>問い合わせ内容<font color="#eb6100"> ※</font></th>
                <td>
                    <textarea name="contents" rows="13" cols="65" 
                    data-label="問い合わせ内容"
                    data-required="true"></textarea>
                    <div class="
                    wb-formerrmsg-contents" style="color:red;"></div>
                </td>
            </tr>
        </table>
    </div>

    <!--================================================================-->
    <div id="send">
        <button class="btn-send
                    wb-formsubmit-wb_inquiry" name="action" value="next" type="submit" type="submit">送信</button>
        <div class="clearfix"></div>
    </div>

</form>
                  

サポートされるバリデーションルール一覧

  • 必須
  • アルファベット
  • アルファベット、数字
  • アルファベット、数字、スペースチェック
  • アルファベット、下線、ハイフンチェック
  • 数字チェック
  • 整数文字列チェック
  • 小数点を含む数字チェック
  • URL形式チェック
  • メールアドレス形式チェック
  • コンマを挟んだ複数のメールアドレス形式チェック
  • 日付型形式チェック      【フォーマット】YYYY/MM/DD、YYYY-MM-DD
  • 日時型形式チェック      【フォーマット】YYYY/MM/DD HH:MI:SS、YYYY/MM/DD HH:MI、YYYY-MM-DD HH:MI:SS、YYYY-MM-DD HH:MI
  • 電話番号形式チェック   【フォーマット】9999-9999-9999
  • 半角文字チェック
  • 全角文字チェック
  • 全角ひらがなチェック
  • 全角カタカナチェック
  • リストに含まれるかチェック
  • 最小文字数チェック
  • 最大文字数チェック
  • 文字数チェック
  • 指定数値超過チェック    ※等しい、小さい値はエラー
  • 指定数値超過チェック    ※小さい値はエラー
  • 指定数値未満チェック    ※等しい、大さい値はエラー
  • 指定数値未満チェック    ※大きい値はエラー

バリデーションエラーメッセージ表示

バリデーションエラーを検地した場合、入力画面で表示させるエラー文言は、HTML文章内に記述するだけで誰でも簡単に入力エラー文言を表示させることができます。

<tr>
                <th>名前<font color="#eb6100"> ※</font></th>
                <td>
                    <input type="text" name="name" size="49"
                      data-label="名前"
                      data-required="true">
                  <div class="
                      wb-formerrmsg-name" style="color:red;"></div>
                </td>
            </tr>
            <tr>
            <tr>
                <th>メールアドレス<font color="#eb6100"> ※</font></th>
                <td><input type="text" name="email" style="ime-mode:disabled;" size="49"
                      data-label="メールアドレス"
                      data-required="true">
                <div class="
                      wb-formerrmsg-email"   style="color:red;"></div>
                </td>
            </tr>
            <tr>
                    

シェアする