今回の記事では、formのバリデーションチェックでアラート表示させる時に起こってしまった不具合を解消したことについて書きます。
結論から入ると、入力欄(inputやtextareaなど)毎のブロックがdiv要素で囲まれていれば問題なく動いた、という話になります。
div要素で囲んでいるのに動作しない方は別の原因があると思いますので、この記事は参考にならないと思います。ご了承ください。
具体的な話に入っていくと、私が不具合に悩んでいたのは
「プライバシーポリシーに同意する」という項目のチェック欄です。送信ボタンの手前によくあるチェックボックスです。
この部分は、他の名前やメールアドレス欄などと違い、段落全部をp要素で囲んでいました。
「チェックボックス1つと「プライバシーポリシーに同意する」というシンプルな構造だし、とりあえずp要素で囲む形で良いかな」
と思っていましたが、これが間違いでした。
フォームのバリデーションチェックを実装している時点で、他のinputやtextarea要素部分はきちんと動作するのに
なぜか最後のプライバシーポリシー欄だけは正常に動作してくれませんでした。
文法は合っているのになぜ??と思っていたら、他のinput要素を囲んでいるブロック要素の違いに気づきました。
試しに同じdiv要素にしてみると、なんと!!改善できました!!(*´▽`*)
それにしても、p要素もdiv要素も同じブロック要素であるはずなのに、なぜこのような違いがあるか不思議です・・・
とりあえず備忘録として記事を残しておきます。