お問合せフォームなどの、テキストを入力するフォームを設置し、その項目が入力必須項目として位置付けたとし、登録する際に空白確認してもし空白であればメッセージなどで空白がありますよと入力を促す仕様はよく見かけます。
必須項目をすべて入力させるためには大事な機能です。
WPの問合せフォーム用としてあるプラグインでは必須項目が空白だとそのフォームの下に入力を促すメッセージが表示されたりします。とても便利でありがたい機能です。
そのような仕様を、別で開発している入力フォームにも取り入れようと思っているところに、さらに機能の追加として、空白だとそのフォームの枠を赤色に変化させる、画面上部にアラート表示、最後登録時に同意を促す画面も付けた方がいいかなと思い、それらを実装した内容を記録として残します。
今回Webシステム構築時にはCSSフレームワークとしてUIKitを利用していました。
このフレームワークにはフォームの枠の色がいくつか用意されており、さらに上部へのアラート表示、同意確認のポップアップ機能まですでに用意されているのだからホント助かります。
まず、必須項目の空白時赤枠表示の機能からです。
入力フォーム側に必要なのはrequiredという属性をつけます。この属性がある入力フォームは必須項目という意味合いがあり、標準でも各ブラウザ側が予め用意されている機能で注意を促してくれます。
そして、formタグにIDもしくはクラスを任意の名前で付けます。今回はinput_formと付けました。
登録する際にクリックするボタンのパーツにentry_btnというクラス名を付けます。パーツはtype=buttonやtype=submitはなるべく避け、spanタグやhref属性無しのaタグで作ります。確認画面など表示中にフォーム送信実行してしまう恐れがあるからです。
次に空白のチェックをするJSです。
<script>
/* 入力フォームのバリデーション */
$(function(){
// 必須項目の空欄チェック
$(".entry_btn").on("click", function(){
// 全体チェック用フラグ
var all_flag = false;
// 全体の項目チェック
$('input, select, textarea').each(function(index, element) {
var result = false;
var attrValue = $(element).attr("required");
// 必須項目の場合
if (typeof attrValue !== 'undefined' && attrValue !== false) {
let inputValue = $(element).val();
// 空白の場合
if (inputValue == null || inputValue == "") {
$(element).addClass("uk-form-danger");
all_flag = true;
} else {
$(element).removeClass("uk-form-danger");
}
}
})
// すべて空白がない場合
if(all_flag === false) {
// 同意画面表示
UIkit.modal.confirm('以上の内容でよろしいですか？').then(function() {
$(".input_form").submit();
});
} else {
// アラート表示
UIkit.notification({
message: '空白の入力必須項目があります',
status: 'danger',
pos: 'top-center',
timeout: 5000
});
}
})
});
</script>
内容としては、.entry_btnが付いたパーツをクリックすると上部のJSの処理で、空白の必須項目がなければUIKitが準備しているモーダルが表示し、空白があればメッセージをブラウザ上部に表示するとともに、その空白のフォーム枠が赤くなるという動作が生まれます。
$(element).attr(“required”) で、各フォームにrequired属性があるかを確認しています。そしてその属性あるフォームに対し、$(element).val() で値を取り出すようにし、値があるかないかを判断した後に各動作をしています。
UIKitで準備されているクラスをタグにつけることでそれに見合った装飾になります。
フォーム枠を赤くするには.uk-form-dangerというクラス名が準備されています。JSで必須項目が空だった場合、そのフォームに.uk-form-dangerをつけることで枠が赤くなるという仕組みになります。
次にアラートを表示する仕組みですが、これもUIKitが準備しているUIkit.notification という機能を利用します。括弧内に決められた項目に好きな値を入れることによりカスタマイズできます。
最後に登録同意画面ですが、これもアラート機能と同じようにUIkit.modal という画面上にポップアップが表示される機能をりようします。そして今回はUIkit.modal.confirmというYesかNoかの選択肢を準備できるものを利用します。
CSSフレームワークには予め多くの機能が準備されているものも多く存在します。それらを利用することによって非常に表現力豊かで便利なサイト作りができます。
しかし、解説がすべて英語でできていたりするために解読まで時間かかってしまうこともありますので、本当にその機能が必要なのかどうかも検討しながら利用していく事が重要かもしれません。