全てのフォームが入力できたら送信ボタンがアクティブになる方法を教えてください。

Question

###実現したいこと
申し込みフォームを作成しています。
会社名、メールアドレス、パスワード（確認も含む）のinputの
全ての項目がはいった時点で送信ボタンが押せる状態にしたいです。

調べてみて、近しいものはあったのですが、
どれか1つでも入力できたら送信ボタンが押せる状態になってしまいました。

###該当のソースコード
https://jsfiddle.net/neo_na_takahashi/moyyvmc6/

###補足情報(言語/FW/ツール等のバージョンなど)
input内にあるclassはjQuery-Validation-Engineを動かすためです。
https://github.com/posabsolute/jQuery-Validation-Engine

Answer 1

think49さんの回答に追加で。

ボタンの色の切り替えも行いたい場合はform.checkValidity()を使用すると楽ちんです。
https://jsfiddle.net/moyyvmc6/5/

Comments

[neo72]

ありがとうございます！
まさにイメージしていたものでした。
Javascriptは既存のものを恐る恐るさわるレベルなので、勉強になりました。m(_ _)m

Answer 2

jQuery を使わずとも required 属性を付与すれば、お望みの動作になるのではないでしょうか。

• Edit fiddle - JSFiddle

Re: neo72 さん

Comments

[neo72]

ありがとうございます！
jQuery-Validation-Engineを使っておりまして、requiredは達成できているのですが、
送信ボタンの仕様が自力でできなく質問した次第です。
どうしても送信ボタンの仕様を実現して欲しいといわれまして……

Answer 3

結局どこまでいってもユーザーからのデータが想定どおりかどうかは怪しいので

• 「送信」ボタンはいつでも押せるものとして
• 受け取ったページでバリデートし不正なデータや必須項目で未入力なデータがあれば入力を促す

というページ構成が妥当です

Comments

[neo72]

ありがとうございます！
おっしゃるとおりなのですが、今回どうしても実装して欲しいといわれまして、お伺いした次第でした。