1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ラジオボタンが選択されていない時にバリデーションエラーを出す

Posted at

今更ながらですが、簡単なフォームならjQueryでバリデーションして、フォームにエラーを出したりしたいですよね。
その時にラジオボタンがどれも選択されていない状態だったらバリデーションエラーにしたい、つまりユーザーが必ず意思を持ってラジオボタンを選択して欲しい、ということがあります。

そんな時、どのように書きますか?
以下のようなHTMLがあります。

<label><input type="radio" name="payment" value="銀行振込"> 銀行振込</label>
<label><input type="radio" name="payment" value="クレジットカード"> クレジットカード</label>
<label><input type="radio" name="payment" value="PayPay払い">PayPay払い</label>

これを選択されてなかったらバリデーションエラーにしたいわけです。
では、jQueryで書いてみましょう。

方法1

// チェックされている要素の個数を取る
const payment = $('[name="payment"]:checked').length;

if (payment === 0) {
    // エラーを表示する・メッセージを変数に入れる等々の処理
}

ラジオボタンなので、$('[name="payment"]:checked').length は選択されていれば必ず1が返ります。
選択されていなければ0が返ります。

方法2

// チェックされている要素のvalue属性を取得する。チェックされていないと取得できないのでundefinedが返る
const payment = $('[name="payment"]:checked').val();

if (!payment) { // undefinedは否定するとtrueになる。文字が入っていれば否定するとfalseになる
    // エラーを表示する・メッセージを変数に入れる等々の処理
}

undefined の扱い方が胆。 !undefinedtrue になることを覚えておくといいですね。

簡単なことなんだけど初心者には気づきづらいのかも。

1
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?