【jQuery】フォームの値を取得 / チェックするスクリプト
2018/09/08
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
下記フォームで試してみます。
[html]
各フォームのすぐ後に、エラーメッセージが表示されるようにします。
[/html]
ラジオボタンとチェックボックスの lebelタグに ID を振っているのは、エラーメッセージがラベルのあとに表示されるようにするための小細工です。
詳細は下で説明。
Javascript
ヘッダ等に下記スクリプトを記述。
[js]
[/js]
解説
スクリプト中の(1)の辺りで各フォームに入力されているかを判定します。
未入力のフォームがあると checkSubmit を false とし、jQuery Alert Dialogs にメッセージ内容を代入します。
書式は
|
1 |
jAlert('message', 'title'); |
となり、messageにメッセージ、titleにアラートウィンドウのタイトルを設定します。
メッセージ中に <br /> 等のHTMLを使用することも可能です。
次に、(2) 部分で各フォームを判定し、赤文字で表示したいエラーメッセージを、指定したセレクタの次の要素に対し作成します。
ラジオボタンとチェックボックスの label に対してIDを振っているのはそのフォームの最後の要素の次に対してメッセージを設定したいからです。
デモ
デモはコチラから（別ウィンドウが開きます）