Eyecatch jQuery

Javascript,jQuery

jQueryで各フォームの値を取得 / チェックしてみる

2015/06/04

jQueryを使い、フォーム内容が埋まっているか、選択されているかなどをチェックする方法のメモ。
PHPでバリデーションする前に簡易にチェックすれば、画像が必須の場合に選択し直すことも無くなりそう。

やりたいことは、
1) フォームが入力されていない場合にアラートウィンドを出す
2) サブミットが実行されないようにする
3) 赤文字で、フォームが埋まっていない旨のメッセージを表示
この3つ。

jQueryで各フォームの値を取得 / チェック

jQuery Alert Dialogs

せっかくなので、アラートウィンドウを出すのに、通常のアラートではなく、jQuery Alert Dialogs を使ってみます。
jQuery Alert Dialogs は以下の配布元よりダウンロード。

jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) | A Beautiful Blog

フォームHTML

下記フォームで試してみます。

ラジオボタンとチェックボックスの lebelタグに ID を振っているのは、エラーメッセージがラベルのあとに表示されるようにするための小細工です。

詳細は下で説明。

javascript

ヘッダ等に下記スクリプトを記述。

解説

スクリプト中の(1)の辺りで各フォームに入力されているかを判定します。
未入力のフォームがあると checkSubmit を false とし、jQuery Alert Dialogs にメッセージ内容を代入します。

書式は

となり、messageにメッセージ、titleにアラートウィンドウのタイトルを設定します。
メッセージ中に <br /> 等のHTMLを使用することも可能です。

次に、(2) 部分で各フォームを判定し、赤文字で表示したいエラーメッセージを、指定したセレクタの次の要素に対し作成します。
ラジオボタンとチェックボックスの label に対してIDを振っているのはそのフォームの最後の要素の次に対してメッセージを設定したいからです。

デモ

デモはコチラから(別ウィンドウが開きます)

よくわかるJavaScriptの教科書

よくわかるJavaScriptの教科書

たにぐち まこと

価格 : 2,678円

     

-Javascript,jQuery
-, , , , ,