【jQuery-32】フォームに警告文を表示させる方法【実践編】

2022/01/24

PC全般

t f B! P L

入力フォームに誤りがある場合に警告文が表示されるようにしましょう。よくあるケースとして、必須項目なのに入力をしないままボタンを押すと、赤字で「必須項目です」などと表示されるあれです。

今回の仕組みはとても簡単で、セレクタで指定した要素の値の有無で判断をします。


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文 を使い条件分岐を作って、それをもとに警告文の表示・非表示を切り替えました。

特に入力欄については最もシンプルな振り分け方法(入力の有無)を採用しましたが、ほかにも漢字でなければいけない、英数字を使ってはいけない、などの条件があるフォームがありますよね。さて、それらはどのように実装しているのでしょうか?

できることはまだまだたくさんありますので、ぜひご自分で工夫をしながら一つずつ前進させていってください。

QooQ