データベースエンジニアが行く

BootstrapのValidatationチェックを実装中に迷い込んだ箇所を紹介
１．jsファイルの指定
Validatationチェックをソースリスト付きで解説しているページはいくつかあったのだが、ヘッダー部分が割愛されていて困った。jquery.min.jsとbootstrap.min.jsにvalidator.jsを追加したら、Validatationチェックが動作した。validator.jsはvalidator.min.jsでもOK。

　<!-- jQuery読み込み -->
　<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
　<!-- BootstrapのJS読み込み -->
　<script src="./bootstrap.min.js"></script>
　<script src="./validator.js"></script>

２．ラジオボタンだけ未入力でもエラーメッセージが表示されない。
ラジオボタン固有の現象・問題ではなく、たまたまラジオボタンでミスをしていました。
下から2行目にclass="help-block with-errors"を指定していますが、エラーメッセージが表示されませんでした。

<div class="form-group">
　<label class="col-sm-3 control-label">職種 <span class="required">必須</span></label>
　　<div class="col-sm-9">
　　　<label class="radio"><input type="radio" name="jobtitle" required data-required-error="職種を選択してください" value="医療施設経営者" /> 医療施設経営者</label>
　　　<label class="radio"><input type="radio" name="jobtitle" required value="医師" /> 医師</label>
　　　<label class="radio"><input type="radio" name="jobtitle" required value="看護師" /> 看護師</label>
　　　<label class="radio"><input type="radio" name="jobtitle" required value="薬剤師" /> 薬剤師</label>
　　　<label class="radio"><input type="radio" name="jobtitle" required value="その他" /> その他</label>
　　</div><!-- class="col-sm-9" -->
　　<div class="help-block with-errors"></div>
</div>

当初は「その他」を選択したときに入力するテキストボックスを、同じ class="form-group” 内に置いていたため、ラジオボタンが未入力でもエラーメッセージが表示されませんでした。テキストボックスを別の class="form-group" に移動させたら、エラーメッセージが表示されるようになりました。

エラーメッセージの変更

”これは必須フィールドです” というメッセージはあまりに味気ないので、変更します。data-error="エラーメッセージ"を追加します。

<input type="text" class="form-control" name="field_name" size="10" data-error="必ずご登録ください" required />

data-error は data-required-error でもOKでした。