JavaScriptで項目の表示非表示を切り替え、かつ表示する場合は入力必須にする

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

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

フォームの設定

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

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

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>

次に送信時に上記JavaScriptを動作させるために、<form>タグにonsubmitイベントを記述します。

<form name="Form1" method="post" action="/regist/Reg2" onsubmit="return formCheck();">

以上で設定は完了です。

開発情報・ナレッジ

フォームの設定

JavaScriptの設定

関連記事