JQuery-Validation-Engine使って、特定条件の時だけ入力させるフォームなどを使うときの話

環境

JQuery 3.1.1

こんなケースはよくあるはず

Webページ上で何かの選択肢があって、その中から「自由入力」みたいなものを選んだ時だけ
自由入力欄を必須にする・・・。といったケースは時々あると思います。

こんなフォームがあるとする

<h2>ダンジョンに一人連れて行くとしたら</h2>

<input type=“radio” id=sel_0” name=“sel” value=“だくねす" >だくねす<br>
<input type=“radio” id=sel_1” name=“sel” value=“めぐみん” >めぐみん<br>
<input type=“radio” id=sel_2” name=“sel” value=“ゆんゆん” >ゆんゆん<br>
<input type=“radio” id=sel_3” name=“sel” value=“そのほか” >そのほか<br>

<input type=“text” id=“sel_free” name=“sel_free” >
<!-- （平仮名４文字なのは見やすくするためだ。悪意はない） -->

そして、フォームの入力判定をブラウザ側で行う際に、
JQuery-Validation-Engine使うケースも多いとおもいます。

そんなときに・・・。

condRequiredがうまく動かない

<h2>ダンジョンに一人連れて行くとしたら</h2>

<input type=“radio” id=sel_0” class="validate[required]" name=“sel” value=“だくねす" >だくねす<br>
<input type=“radio” id=sel_1” class="validate[required]" name=“sel” value=“めぐみん” >めぐみん<br>
<input type=“radio” id=sel_2” class="validate[required]" name=“sel” value=“ゆんゆん” >ゆんゆん<br>
<input type=“radio” id=sel_3” class="validate[required]" name=“sel” value=“そのほか” >そのほか<br>

<input type=“text” id=“sel_free” class="condRequired[sel_3]" name=“sel_free” >

なぜかこの、condRequired[ID]がうまく動かない。
ID で指定したものがチェックされていても、検出されない。

こうすれば良い

JQuery-Validation-Engineは、設定を変えなければ
「画面上に表示されていないものは無視する」仕組みなので
入力させたい時だけ、表示されせばよい。
そのほうが、余計なものが表示されず快適といえば快適。
（特にスマートフォンのような、表示枠に余裕がない環境ではね・・・）

したがって、こんな実装になる

バリデーション類の設定

//（ブラウザバックを含む）ページが表示されたタイミングで実施する。
window.onpageshow = function(){
  jQuery("#form").validationEngine();
  appearTextIn();
  
  //ラジオボタン群のどれかがチェックされているかを確認する
  jQuery(".gp").on("click",function(){
    appearTextIn();
  });
}

//テキスト欄を有効にするか否かの判定実施。複数箇所でよびだされるので関数にした。
var appearTextIn = function(){
  
  var obj = document.getElementById("sel_3");
  var isChecked = obj.checked;
  if ( isChecked == true ){
    //「その他」がチェックされていればテキスト入力欄を表示させる
    document.getElementById("sel_free").style.display = "";
  }else{
    //上記条件以外なら　テキスト入力欄を表示しない
    document.getElementById("sel_free").style.display = "none";
  }
}

HTML部分

<h2>ダンジョンに一人連れて行くとしたら</h2>

<input type=“radio” id=sel_0” class="gp validate[required]" name=“sel” value=“だくねす" >だくねす<br>
<input type=“radio” id=sel_1” class="gp validate[required]" name=“sel” value=“めぐみん” >めぐみん<br>
<input type=“radio” id=sel_2” class="gp validate[required]" name=“sel” value=“ゆんゆん” >ゆんゆん<br>
<input type=“radio” id=sel_3” class="gp validate[required]" name=“sel” value=“そのほか” >そのほか<br>

<input type=“text” id=“sel_free” class="validate[required]" name=“sel_free” style="display:none;" >

といった感じになります。

余談

自由入力が選択されている時だけ、テキスト入力欄を表示して入力させるようフォームを用意する機会は多々あると思います。

こんな感じで「非表示になっているものは対象外にする」
なんて実現方法も大いにありでは。