JavaScriptで項目の表示非表示を切り替え、かつ表示する場合は入力必須にする～フォームデザインのカスタマイズ vol.8～

入力フォーム上で、特定の選択肢が選ばれた場合にのみ入力必須のテキストボックスを表示する方法をご案内いたします。

参考DEMOはこちら　「職種」で「その他」を選ぶと入力必須のテキストが表示されます。

▼vol.1～7のリンクはこちら

Vol.1 姓名の記述を分けて横並びにする
Vol.2 “その他”の項目に入力欄を追加する
Vol.3 マトリクス形式の回答欄を作成する
Vol.4 星型のレーティング形式の回答欄を作成する
Vol.5 JavaScriptで項目の表示非表示を切り替える
Vol.6 タップで回答できるバー形式の回答欄を作成する
Vol.7 同意ボタンのチェックで送信ボタンを有効化させる
★Vol.8 JavaScriptで項目の表示非表示を切り替え、かつ表示する場合は入力必須にする

▼目次

1. フォームの設定
 2. JavaScriptの設定

1. フォームの設定

フィールドはセレクトフィールド（職種）とテキストフィールド（その他）を用意します。
フォームの設定上は、テキストフィールド（その他）は任意項目で設定（入力必須にしない）します。

（フォーム編集前イメージ）

2. JavaScriptの設定

それではJavaScriptの設定をしていきましょう。今回は以下2つのJavaScriptを設定し、制御されるように設定します。

・表示切替：「職業」で「その他」が選択された場合に、テキストフィールドを表示する制御
・入力必須：「職業」で「その他」が選択された場合に、テキストフィールドを入力必須にする制御

まず、いずれの制御においても必要となる、各要素へのidの付与を行います。

今回はセレクトフィールドに「jobID」、テキストフィールドに「otherID」、テキストフィールドの行全体に「otherColumnID」とそれぞれidを設定します。

（なお、セレクトフィールドの差替えキーワードは「jobCategory」、テキストフィールドの差替えキーワードは「other」で設定しています）

<dl class="cf">
<dt class="title">職種<span class="need">＊</span></dt>
<dd class="data ">
<select id="jobID" class="$errorInputColor:jobCategory$" name="jobCategory">
<option value="">----- 選択してください -----</option>
<option value="1" $jobCategory:1$>営業</option>
<option value="2" $jobCategory:2$>サポート</option>
<option value="3" $jobCategory:3$>SE</option>
<option value="4" $jobCategory:4$>その他</option>
</select><br>
<span class="msg">$error:jobCategory$</span>
</dd>
</dl>
<dl id="otherColumnID" class="cf">
<dt class="title">その他<span class="need">＊</span></dt>
<dd class="data ">
<input id="otherID" class="input $errorInputColor:other$" type="text" name="other" value="$other$" maxlength="32" ><br>
<span class="msg">$error:other$</span>
</dl>

ではまず、表示切替の制御を行うJavaScriptです。

onchangeイベントで「その他」が選ばれた場合にテキストフィールドを表示する処理を記述します。

 <select id="jobID" class="$errorInputColor:jobCategory$" name="jobCategory" onchange="entryChange();">

続いて、以下コードを</head>の直前に記述します。

今回は「その他」はラベルID「4」なので、”ID=4が選択されたとき”の処理と、”それ以外が選択されたとき”の処理とでそれぞれ記述します。

<script type="text/javascript">
function entryChange(){
if(document.getElementById('jobID')){
id = document.getElementById('jobID').value;

if(id == '4'){
document.getElementById('otherColumnID').style.display = "";
document.getElementById('textError').style.display = "none";
}else if(id != '4'){
document.getElementById('otherColumnID').style.display = "none";
document.getElementById('otherID').value = "";
document.getElementById('textError').style.display = "none";
}
}
}
window.onload = entryChange;
</script>

次に、入力必須の制御を行うJavaScriptです。
まず、テキストフィールドのソース直下にid「textError」を付与したエラーメッセージ用のコードを記述します。

<input id="otherID" class="input $errorInputColor:other$" type="text" name="other" value="$other$" maxlength="32" ><br>
<span id="textError" class="msg">入力必須です。</span>

続いて、以下コードを</head>の直前に記述します。

なお、今回のデモ設定では、テキストフィールドに何も入力しなかった場合、アラート表示（ポップアップで「入力内容に不備があります」と表示）と、エラー表示（入力欄直下に「入力必須です」と表示）の2つの動作を入れています。もちろん併用しても良いですが、必要に応じてどちらか一方の処理を削っても問題ありません。

<script type="text/javascript">
<!--
function formCheck(){
id = document.getElementById('jobID').value;
if(id == '4' && document.getElementById('otherID').value ==""){
document . getElementById( 'textError' ) . style . display = "";
var flag = 0;
}else{
document . getElementById( 'textError' ) . style . display = "none";
}

if( flag == '0' ){
window . alert( '入力内容に不備があります。' );
return false; // 送信中止
}else{
return true; // 送信実行
}
}
// -->
</script>

以上で設定は完了です。

動作検証して試してみてくださいね＾＾

1. フォームの設定

2. JavaScriptの設定

関連記事はこちら