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にこのメソッドを追加します。

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくば、我に七難八苦を与えたまえ」です^^

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

コメントをどうぞ

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

CAPTCHA