Forums: Open Discussion (Thread #19188)

複数レイヤーの画面構成におけるValidatorの挙動について (2008-07-01 22:07 by horit #37410)

お世話になっております。

JSPの中の入力エリアを<div>で複数のブロックに分け、
JavaScriptによって表示非表示を切り替える、タブ構造の
入力画面を作成しています。

【例】
タブ切り替えのJavaScript
function changeLayer(id){
var layer = new Array('layer1','layer2','layer3');
for(i = 0; i < layer.length; i++){
document.getElementById(layer[i]).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
}

JSP
<div id="tabs7">
<ul>
<!-- CSS Tabs -->
<li id="current"><a href="javascript:changeLayer('layer1')"><span>タブ1</span></a></li>
<li><a href="javascript:changeLayer('layer2')"><span>タブ2</span></a></li>
<li><a href="javascript:changeLayer('layer3')"><span>タブ3</span></a></li>
</ul>
</div>
<div id=layer1>
※タブ1
</div>
<div id=layer2>
※タブ2
</div>
<div id=layer3>
※タブ3
</div>

このJSPの入力項目をterasolunaのvalidator(javascriptでチェックするほう)でチェックしたのですが、
非表示になっている項目が入力エラーとなった場合、validatorがうまく動作しません。

おそらく、 function jcv_handleErrors(messages, focusField)の中で、
非表示になっている所にfocusを当てようとしたことによるものだと思いますが、
なにか回避策はございますでしょうか。

※validationのタイミングで、layer1に表示を変更し、常にFormの最初のelementに
フォーカスが当たるようにすれば回避できるかと思うのですが、なにぶんjsが
自動生成されている関係上対処に困っています。

ノウハウをご教示頂けると幸いです。
以上、どうぞよろしくお願いいたします。

Reply to #37410×

You can not use Wiki syntax
You are not logged in. To discriminate your posts from the rest, you need to pick a nickname. (The uniqueness of nickname is not reserved. It is possible that someone else could use the exactly same nickname. If you want assurance of your identity, you are recommended to login before posting.) Login

RE: 複数レイヤーの画面構成におけるValidatorの挙動について (2008-07-14 12:40 by kimuraku #37574)

本件について調査しました。

■不具合の原因
JSPにおいて、タブのみnoneにして非表示にしていますが、
タブ内のinputタグなどの画面部品がhiddenにはなっておらず、
入力チェックエラー後に当該部品へフォーカスを当てようとして
Javascriptでエラーが発生します。

commons-validatorの
org.apache.commons.validator.javascript.validateUtilities.js
には、エラーメッセージ処理スクリプトであるjcv_handleErrors関数が
定義されていますが、下記の通り対象フィールドがhiddenかどうかを確認し、
hiddenでない場合にフォーカスを当てる処理を行っています。
------------------------------------------------
if (focusField && focusField != null) {
  var doFocus = true;
  if (focusField.disabled || focusField.type == 'hidden') {
    doFocus = false;
  }
  if (doFocus &&
    focusField.style &&
    focusField.style.visibility &&
    focusField.style.visibility == 'hidden') {
    doFocus = false;
  }
------------------------------------------------

また、TERASOLUNAで追加されたチェック関数には個別にエラー処理が
実装されており、commons-validatorのそれとは実装箇所も内容も異なります。
------------------------------------------------
if (fields.length > 0) {
  if (focusField != null) {
    focusField.focus();
  }
  alert(fields.join('\n'));
}
------------------------------------------------


■対処方法
Struts標準のチェックルールに関しては、タブ内の画面部品を
hiddenにすることで対応できます。以下JSPの修正例です。
------------------------------------------------
function changeLayer(id){
  var layer = new Array('layer1','layer2','layer3');
  for(i = 0; i < layer.length; i++){
    document.getElementById(layer[i]).style.display = 'none';
    document.getElementById('item1').style.visibility = 'hidden';
    document.getElementById('item2').style.visibility = 'hidden';
    document.getElementById('item3').style.visibility = 'hidden';
  }
  document.getElementById(id).style.display = 'block';
  if (id == 'layer1') {
    document.getElementById('item1').style.visibility = 'visible';
  } else if(id == 'layer2') {
    document.getElementById('item2').style.visibility = 'visible';
  } else {
    document.getElementById('item3').style.visibility = 'visible';
  }
}
------------------------------------------------


TERASOLUNAの追加ルールに関しては、上記に加えて以下の対応が必要です。

1-a. エラー発生時のフィールド判定処理をStrutsの仕様に合せて変更する。
1-b. エラー発生時にフォーカスを当てないように変更する。
2.  上記いずれかの変更を、
   jp.terasoluna.fw.web.struts.form.javascript配下の
   [チェックルール名].js および validateUtilitiesEx.jsに対して行う。
3.  上記変更したjsファイルを任意のパッケージ配下に格納し、
   WEB-INF/validator-rules-ex.xmlの定義に加える。
------------------------------------------------
<validator name="hoge"
   classname="jp.terasoluna.fw.web.struts.form.FieldChecksEx"
   method="validateHoge"
   methodParams="java.lang.Object,
               org.apache.commons.validator.ValidatorAction,
               org.apache.commons.validator.Field,
               org.apache.struts.action.ActionMessages,
               org.apache.commons.validator.Validator,
               javax.servlet.http.HttpServletRequest"
   msg="errors.hoge"
   jsFunction="xxx.xxx.xxx..validateHogeCustomized">
       :
       :
<validator name="includeJavaScriptUtilitiesEx"
   classname=""
   method=""
   methodParams=""
   depends=""
   msg=""
   jsFunction="xxx.xxx.xxx..validateUtilitiesExCustomized"/>
------------------------------------------------
Reply to #37410

Reply to #37574×

You can not use Wiki syntax
You are not logged in. To discriminate your posts from the rest, you need to pick a nickname. (The uniqueness of nickname is not reserved. It is possible that someone else could use the exactly same nickname. If you want assurance of your identity, you are recommended to login before posting.) Login

RE: 複数レイヤーの画面構成におけるValidatorの挙動について (2008-07-14 22:13 by Anonymous #37590)

解決いたしました。
ありがとうございました。
Reply to #37410

Reply to #37590×

You can not use Wiki syntax
You are not logged in. To discriminate your posts from the rest, you need to pick a nickname. (The uniqueness of nickname is not reserved. It is possible that someone else could use the exactly same nickname. If you want assurance of your identity, you are recommended to login before posting.) Login