.val()で値がnullのときまたは空欄のときにalertを出す! jQueryの勉強

2021-02-01

バリデーションで空欄に何か入力させたかったことがあり、その時の備忘録です。

.val()で取得した値がnullのときまたは空欄のときにalertを出す方法 ( jQueryを使用 )

inputタグ内の値が、空欄やnullの時にalertを画面に表示します。

let entry_date = $('input[name="entry_date_display"]').val();

if(entry_date == null || entry_date == '' ){
alert("何か入力してください");
}

またはを現す「 || 」を使うことで簡単に条件を書くことができます。

上記だとわかりづらいのでHTMLを含めたものをcodepenで作成しました。
より難易度をあげてinputタグも2つにしてみました。

See the Pen nullのときまたは空欄のときjquery by Nakamoto (@programmerlife) on CodePen.

2つある入力欄に何も入力せずにinputからフォーカスを外すとalert()が表示されます。ちなみにこのコードはスペースは入力とみなされます。スペースの入力時については下記に書いたので合わせてご確認いただければと思います。

また今回はnameで値を取得していますが、IDを使用する場合は以下のように書きます。

id = aの値は「$('#a').val();」

簡単に書き換えられるかと思います。
状況に合わせてnameとIDはつかいわけてみてください。

おわり

バリデーションは勉強になることが多いですね。いろいろなパターンがあるので、一通り作成してバリデーションに強くなりたいところです。