jQueryでフォームの必須チェックをする

jQueryでフォームの必須チェックをします。

フォームはDEMOに表示します。

DEMOを見ればわかるとおり、名前と性別は必須です。

登録ボタンを押せば、$("form").submit~が実行されます。

そのロジックの中で$(“#id”).val()で名前を取得しています。空の場合、boolean変数にfalseを入れています。

次に性別で$(“:radio:checked”).lenght == 0ならチェックされていないことになるので、boolean変数にfalseを入れています。

formをsubmitする時にfalseが返るとsubmitされません。逆にtrueならsubmitされます。

これで必須チェックを行っています。

ただ、これでは不親切なので、必須項目が入力されていない場合は何らかのメッセージを表示するようにしてみます。

以下のように必須項目の後ろにspanタグを追加します。

名前欄が空の場合にメッセージを表示したいのですが、セレクタを使えば隣の要素にアクセスできるんです。

上記で言えば$(“input + span”)というように+で繋ぐことでspanタグにアクセスすることができます。

アクセスできるのはあくまでも後ろのspanタグになります。

spanタグ内にメッセージを表示するには、セレクタ.text(“文字列”)で動的に表示することができます。

DEMOです。

これで、十分なんですが、メッセージなんで赤色にしたいですね。

ということでidに対してaddClass(クラス名)メソッドと言うのがあります。

逆にremoveClass(クラス名)メソッドもあります。

では上記のif~elseにこのメソッドを追加します。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA