「jqTransform.js」と「exValidation.js」の併用時にselectが…

タイトルにも書きましたが、「jqTransform.js」と「exValidation.js」の併用時にはちょっと注意が必要です。

「jqTransform.js」は、CSSをいじるだけで

$("form.jqtransform").jqTransform();

こんな感じの一行でフォームを装飾できるのが魅力ですが、実はDOMを別の要素で構築し直しているので他のプラグインと相性が悪かったりします。

特にSelectBoxなんかは、もう<select>～</select>の面影も残っていないので悲惨。

詳しく見た訳じゃないけど、こんな感じで再構築している模様。。。

<select>
   <option>選択</option>
</select>

▼▼再構築▼▼

<div class="jqTransformSelectWrapper">

<>
    <span>選択</span>
    <a href="#" class="jqTransformSelectOpen"></a>
</div>

<ul>
  <li>
    <a>選択</a>
  </li>
</ul>

</div>

っつーわけで、「exValidation」の「laterCall()」する場合には、こんな感じでやります。

//selectのidを配列に
var obj = new Array();
$("form select").each(function (i) {  
   obj.push("#" + $(this).attr("id")); 
});

//"div.jqTransformSelectWrapper ul li a"をトリガーにして
//validation.laterCall()をループ処理

var triger = $("div.jqTransformSelectWrapper ul li a");

$(triger).click(function(){
    for(var i in obj){ 
        validation.laterCall(obj[i]);
    }
		    
});

とりあえず、こんな感じで動きはしました。

まあ、変更した場所だけ…というのであれば

var triger = $("div.jqTransformSelectWrapper ul li a");

$(triger).click(function(){
    var eee = $(this).parents(".jqTransformSelectWrapper").children("select").attr("id");
    validation.laterCall("#" + eee);
});

でもオッケーです。