質問: 表題の件で対応したいのですが、解決方法が不明な為どなたかご教授いただければと存じます。 ●やりたいこと 名前カナ 名前 の全ての項目が正しく設定されている場合はボタンを活性化し、それ以外は非活性とする ■止まっている点 kana-icon name-icon のチェックアイコンが、全て表示されている場合の条件で活性化と非活性を設定したが、 チェックアイコンの非表示はhideで設定しているため、lengthではtureの条件になってしまい 初期の画面読み込みでもボタンが活性化してしまう。 要素をremoveしてみたが、removeした後にappendしようとしても項目が復活しない 止まっている部分のソース ``` // 画面読み込み時にアイコンが表示されないようにする $('#kana-icon').hide(); $('#name-icon').hide(); // #以下ボタンの非活性・活性化 if ($('#kana-icon').length&&$('#name-icon').length) { $("#buttonCheck").prop("disabled", false); } else { $("#buttonCheck").prop("disabled", true); } ``` 全ソース ``` テストフォーム お名前フルネーム(全角) お名前フルネームカナ(全角) 会員登録する ```
回答: ### Form Validatio Form Validationを使えば、特別な事をせずとも `::invalid` な要素があるだけで submit 出来なくなります。 * ~~HTML5 で優れたフォームを作成する - HTML5 Rocks~~ **(2018/07/31 20:17追記)** 上記リンク先は情報が古いと指摘を頂いた為、新しい情報を追記しました。 * 制約の検証 - HTML: HyperText Markup Language | MDN * 4.10 フォーム - HTML Standard 日本語訳 * 4.10.20 制約 - HTML Standard 日本語訳 ### 要素のpattern属性 pattern属性を使って検証すれば、フォーム送信前に検証できると思います。 * : 入力欄 (フォーム入力) 要素 - HTML: HyperText Markup Language | MDN Re: abab7200 さん