入力フォームに誤りがある場合に警告文が表示されるようにしましょう。よくあるケースとして、必須項目なのに入力をしないままボタンを押すと、赤字で「必須項目です」などと表示されるあれです。
今回の仕組みはとても簡単で、セレクタで指定した要素の値の有無で判断をします。
HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
フォームのバリデーション（有効性のチェック）を行う
完成形はこんな感じになります
See the Pen
valid form by taichi (@taichi_na)
on CodePen.
ごくシンプルな入力フォームです。二つの項目ともに入力・選択必須としており、入力・選択がされていないと警告文が出る仕組みになっています。
実際に動かしてみて、どのようなスクリプトを書けばよいか考えてみましょう。
HTML, CSS を書きましょう
See the Pen
valid form by taichi (@taichi_na)
on CodePen.
HTMLを見ていただければわかりますが、それぞれのセクションが <div> で分かれており、タイトル、警告文、入力欄が入っています。
入力欄の value の値は初期値（最初から書かれている入力例など）であり、実際に送信される内容になります。入力された値がここに入るということです。もし空だと警告文が表示されます。
その警告文ですが、HTMLには書かれているので、このあと jQuery で一度消してあげる必要がありますね。一度消して、何か文字が入力されている場合は非表示、文字が何も入力されていない場合は表示します。
セレクトボタンに関しても同じです。value=”none” であった場合に警告文を表示させます。
そして最後に Submit ボタンを配置しました。今回は警告文を表示させるところまでしか実装しませんが、このボタンを押すと通常はフォームの内容がサーバーへ送信されます。
jQuery で表示、非表示を切り替える条件分岐
See the Pen
valid form by taichi (@taichi_na)
on CodePen.
では順番に見ていきましょう！
1. $(“.alert”).hide();
とりあえず今表示されている .alert の部分を非表示にします
2. $(“#submitBtn”).click(function(){
一番下の Sunbmit ボタンを押したときに、以下の関数を実行します。今回はページの遷移が行われないので、文末に return false を忘れずに記しておきましょう。
3. if(!$(“#text”).val()){
$(“#textSection .alert”).show();
} else {
$(“#textSection .alert”).hide();
}
if文ですね。感嘆符は論理演算子の一つで「否定」を意味します。最初の一節は「もし #text の値を取得できなかったら」警告文である #textSection .alert を表示、ということ。
else （そうでなかったら）、何か入力がされていたら、警告文を隠します。
4. if($(“select”).val() == “none”){
$(“#selectArea .alert”).show();
} else {
$(“#selectArea .alert”).hide();
}
「もし select の val が none だった場合」表示させます。
それ以外だった場合は表示を隠します。
まとめ：if文を使って入力チェックを行おう
今回は if文 を使い条件分岐を作って、それをもとに警告文の表示・非表示を切り替えました。
特に入力欄については最もシンプルな振り分け方法（入力の有無）を採用しましたが、ほかにも漢字でなければいけない、英数字を使ってはいけない、などの条件があるフォームがありますよね。さて、それらはどのように実装しているのでしょうか？
できることはまだまだたくさんありますので、ぜひご自分で工夫をしながら一つずつ前進させていってください。
