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

by 機械忍者 · 公開済み 2015年2月10日 · 更新済み 2015年2月10日

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

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

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

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

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

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

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

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

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

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

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

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

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

しかし、

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

という事象に遭遇。

もっと詳しく書くと、

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

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

という罠でした。

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

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

wufoo.js

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

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