Wufoo & Parsleyの実装で、submitボタンに勝手に付与されたdisabledが解除できなくて苦心した件

参考: Wufoo(SaaS形式。簡単なフォームを生成できるサービス)

参考: Parsley(Jqueryベースのリアルタイムバリデーション用ライブラリ。野菜のパセリ。)

あーはまったよ。はまった。すげぇ時間くったのでメモ残し。

そもそもやりたかったこと

Wufooというフォーム生成サービスで作ったフォームにリアルタイムエラーを実装したかった。

その他背景

Wufooのフォームはデザイン要素をカスタマイズしたかった。

WufooはJSのembed形式やiframes形式など、コピペで設置ができるような配慮がされているのだが、その場合デザインはほとんどいじれません。いじれるけど大変。

デザインを変更したいとか細かいところを修正したいという場合は、ダウンロード形式があるので、それで対応しようした。

そしてダウンロード形式でやった場合バリデーションエラーを出すとaction先がSaaS側なのでださい画面が出てしまう。

※SaaS提供画面側は「いじれるけど大変」と書いた通りです

よし!リアルタイムエラーの実装で回避しよう!となったわけです。

(もちろん技術詳しい方にJS切られてpostされたらださい画面出るんですが、可能性低い&一部ユーザーだけだと思うので無視)

問題というか詰まったところ

インストから設定までは、それぞれのドキュメント見ながらで普通に通過した。

しかし、

・フォームの入力エラーなどを出すと、二度とsubmitボタンが押せなくなる

という事象に遭遇。

もっと詳しく書くと、

  1. Wufooのフォームを設置したり、Parsleyのインスト(公式のドキュメントに沿って)。
  2. 各フォームにバリデーション設定して、フォームのバリデーション機能をテスト
  3. JSでのエラー(いわゆるリアルタイムエラー)の表示確認(やったー!)
  4. エラー対応をして正式なデータを入れてもsubmitが押せない
  5. submitボタンにアトリビュート disabled が付与されている

5以降、解除する条件がないため一生 disabled。(=つまりsubmitできない)

・フォームの入力エラーなどを出すと、二度とsubmitボタンが押せなくなり、リロードしかない。

という罠でした。

解決方法

Parsleyは悪くない。疑ってごめんなさい。

Wufooのダウンロードカスタマイズがいけなかった。

wufoo.js

13 function disableSubmitButton() {
14   document.getElementById('saveForm').disabled = true;
15 }

余計なことしやがって。falseに変更したら解決した。

機械忍者

某SEO会社(?)勤務。 多分日本語よりHTMLの方が得意です。 最近はRubyとかいうキラキラな言語も勉強中です。 SEOはもう標準スキルになってきてると思うので正直もうあんまり昔ほどの熱意は感じません。 新たに躍動してる人も多いですしね。 だれか強化骨格コスプレあったら教えてください。