【input、radio、select、checkbox、textarea】form関連のタグに値が入力されているかチェックするjQuery

更新日：2021年12月15日

お問い合わせフォームに情報を入力して貰って、いざ送信って時に、必須の箇所に情報が未入力のまま送信されてしまっては困りますよね。
そこでjQueryで未入力かどうかをチェックして、もしも未入力の場合には送信しないようにするといったことをします。
今回はform関連の主要タグ全種、input、radio、select、checkbox、textareaの全てのパターンの未入力チェックをする方法をご紹介します。

まずHTMLは下記のように記述します。

次にjQueryの記述です。下記のように記述します。

このソースコードを貼り付けて出来上がるのがこちらです。

ラジオボタンとチェックボックスの空判定だけ少し癖がありますが、あとは基本的にval()で値を取得し、==""で空かどうか判定するだけで大丈夫です。

空判定に関しては様々な方法があり、今回のは一例ですが、一番シンプルで分かりやすい書き方かと思います。
お試し下さい！