概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その４７ )( Node.js を 8.9.1 → 8.9.4 へ、npm を 5.5.1 → 5.6.0 へバージョンアップする ) の続きです。

今回の手順で確認できるのは以下の内容です。
- 入力画面３の作成

参照したサイト・書籍

入力画面３は何をする？
「お問い合わせの種類２」を必須にする
変換＆入力チェック処理の仕様を決める
お問い合わせの内容の textarea タグに maxlength 属性を追加する
お問い合わせの種類１、お問い合わせの種類２の選択肢を表示する処理を追加する

手順

入力画面３は何をする？

久しぶりに画面の作成に戻ってきましたが、入力画面３で何をするつもりだったか忘れていました。。。　ということでまとめます。

「お問い合わせの種類１」はドロップダウンリストの、「お問い合わせの種類２」はチェックボックスのサンプルです。選択肢は固定です（Enum で定義します）。
「お問い合わせの内容」はテキストエリアのサンプルです。最大500文字の制限を付けます。
「アンケート」は専用のテーブルを作成して、そこに登録されたデータから動的に表示します。
Spring Boot + npm + Geb で入力フォームを作ってテストする ( その９ )( 各画面の HTML を作成する２ ) で入力画面３を作成した時は「お問い合わせの種類１」「お問い合わせの内容」だけ必須にしていましたが、チェックボックスの必須チェックのサンプルも作成しておきたいので「お問い合わせの種類２」も必須に変更します。

「お問い合わせの種類２」を必須にする

src/main/resources/templates/web/inquiry/input03.html を以下のように変更します。

            <!-- お問い合わせの種類２ -->
            <div class="form-group" id="form-group-type2">
              <div class="control-label col-sm-2">
                <label class="float-label">お問い合わせの種類２</label>
                <div class="label label-required">必須</div>
              </div>

<div class="label label-required">必須</div> を追加します。

画面は以下のようになります。

f:id:ksby:20180417004445p:plain

変換＆入力チェック処理の仕様を決める

各項目で以下の変換＆入力チェック処理を行います。

項目	変換＆入力チェック処理
お問い合わせの種類１	必須チェック
お問い合わせの種類２	必須チェック
お問い合わせの内容	必須チェック

「お問い合わせの内容」の最大文字数は maxlength 属性で制御されている前提とし、Javascript ではチェックしません（サーバ側では文字数チェックは行います）。

お問い合わせの内容の textarea タグに maxlength 属性を追加する

「お問い合わせ内容」の <textarea rows="5" name="inquiry" ...> に maxlength="500" を追加します。

お問い合わせの種類１、お問い合わせの種類２の選択肢を表示する処理を追加する

まずは「お問い合わせの種類１」からです。src/main/java/ksbysample/webapp/bootnpmgeb/values の下に Type1Values.java を新規作成し、以下の内容を記述します。

package ksbysample.webapp.bootnpmgeb.values;

import lombok.AllArgsConstructor;
import lombok.Getter;

@SuppressWarnings("MissingOverride")
@Getter
@AllArgsConstructor
public enum Type1Values implements Values {

    PRODUCT("1", "製品に関するお問い合わせ")
    , RECRUIT("2", "人事・採用情報")
    , OTHER("3", "その他");

    private final String value;
    private final String text;

}

src/main/resources/templates/web/inquiry/input03.html の「お問い合わせの種類１」の部分を以下のように変更します。

            <!-- お問い合わせの種類１ -->
            <div class="form-group" id="form-group-type1">
              <div class="control-label col-sm-2">
                <label class="float-label">お問い合わせの種類１</label>
                <div class="label label-required">必須</div>
              </div>
              <div class="col-sm-10">
                <div class="row"><div class="col-sm-10">
                  <select name="type1" id="type1" class="form-control" style="width: 250px;" autofocus>
                    <th:block th:each="type1Value,iterStat : ${@vh.values('Type1Values')}">
                      <option value="" th:if="${iterStat.first}">選択してください</option>
                      <option th:value="${type1Value.value}" th:text="${type1Value.text}"></option>
                    </th:block>
                  </select>
                </div></div>
                <div class="row hidden js-errmsg"><div class="col-sm-10"><p class="form-control-static text-danger"><small>ここにエラーメッセージを表示します</small></p></div></div>
              </div>
            </div>

次は「お問い合わせの種類２」です。src/main/java/ksbysample/webapp/bootnpmgeb/values の下に Type2Values.java を新規作成し、以下の内容を記述します。

package ksbysample.webapp.bootnpmgeb.values;

import lombok.AllArgsConstructor;
import lombok.Getter;

@SuppressWarnings("MissingOverride")
@Getter
@AllArgsConstructor
public enum Type2Values implements Values {

    ESTIMATE("1", "見積が欲しい")
    , CATALOGUE("2", "資料が欲しい")
    , OTHER("3", "その他の問い合わせ");

    private final String value;
    private final String text;

}

src/main/resources/templates/web/inquiry/input03.html の「お問い合わせの種類２」の部分を以下のように変更します。

            <!-- お問い合わせの種類２ -->
            <div class="form-group" id="form-group-type2">
              <div class="control-label col-sm-2">
                <label class="float-label">お問い合わせの種類２</label>
                <div class="label label-required">必須</div>
              </div>
              <div class="col-sm-10">
                <div class="row"><div class="col-sm-10">
                  <div class="checkbox">
                    <th:block th:each="type2Value : ${@vh.values('Type2Values')}">
                      <label>
                        <input type="checkbox" name="type2" th:value="${type2Value.value}">
                        <th:block th:text="${type2Value.text}">見積が欲しい</th:block>
                      </label>
                    </th:block>
                  </div>
                </div></div>
                <div class="row hidden js-errmsg"><div class="col-sm-10"><p class="form-control-static text-danger"><small>ここにエラーメッセージを表示します</small></p></div></div>
              </div>
            </div>