09

嵌り実況

  1. ファイルをアップロードする画面が必要になった。intra-mart Accel Platform 上なので当然 imuiFileUpload を使うことを考える。
  2. ただアップロードするだけじゃなく、アップロードに際していくつか入力する項目が付属するので、ファイルは imuiFileUpload に任せて、 imuiFileUpload がアップロードしたファイルについての情報と付属項目を一緒に <form> にいれて imuiAjaxSend で送信するのが楽そう、と考える。
  3. 画面全体を <form> で囲ったら imuiFileUpload のスタイルが剥がれて、おそらくまともに動作していない状態になった。
    • ファイルをアップロードする性質上フォームとは相性が悪いのか?
  4. 選択肢としてありそうなのは imuiFileUploadouterFormId 属性の指定。
    • でもこれって単にマルチパートとして送信してしまうのでは?
    • 別にそれでもいいんだけど、imuiFileUpload がサーバサイドで Session Scope Storage に自動的に保存してくれる機能を活かしたい
  5. とりあえず、全ての値を hidden で保持するフォームを作成して、入力された値はそこに転記して imuiAjaxSend することにしようと考える。
  6. でも入力値はバリデーションしたいので、上記の転記先のフォームに対して imuiValidate のルールを定義して呼び出してみる。
    • エラーメッセージ表示は関数を与えることでコントロールできるので、バリデーション対象が hidden でもいけると踏んだ
  7. 何を入力してもまったくバリデーションエラーにならない(入力値に何を入れても imuiValidateの戻り値が true
  8. jQuery validation plugin hidden でGoogle検索したらデフォルトでは hidden 項目はバリデーションの対象にしないらしいことが分かる。これを無効にするにはバリデーションを無視する項目を指定する引数に [] (空配列)を渡せばよいらしいことが書いてある。
  9. 与えてみるが何も変わらない。
  10. DOMエレメントツリーを見ていると上記の転記先の <form>novalidate なる属性が付与されていることを発見する。
  11. 調べてみると html5 の機能でバリデーションを無効にする指定らしい。StackOverFlowにてjQueryのvalidation pluginも何らかの条件下でこの属性を付与するようで困るというようなポストを見つけた。
  12. StackOverFlowの同スレッドにて $("#form").removeAttr("novalidate") せよとのポストが見つかったので試してみるも novalidate はなくなるが(あたりまえ)動作には変化ない。
  13. ここまで書いたところでふと思い当たってバリデーション無視対象を [] でなく '' にしてみる

・・・やっと imuiValidate がエラーを返してきた。[-_-]

敗因は?

ファイルアップロードが中途半端に混ざってる画面設計か、もしくは4で outerFormId 使うほうを選んでたらもっと簡単に解決したのだろうか(試してない)。 あとはバリデーション無視対象はString型だよ、と一応公式ドキュメントには書いてあるので、それを見逃した点かな…。