jQueryを用いたフォーム送信時に空欄がある場合にアラートを出す処理

概要

この記事は、以下のUdmeyの講座のセクション6の52,53の内容をまとめたものです
フォーム送信時に指定した項目に、空欄もしくは未選択がある場合にイベントが発火し、フォームの送信を中断し、アラートを出す実装内容です。

コード概要

2つのメソッドを用いて実装します
checkBlankメソッド：空欄があるかどうかのチェック。ある場合には、アラートを表示&falseを返す
$("#f").submit：フォームにイベントを登録。送信されると発火

実装内容

想定されるフォーム

<form action="/" name="f" id="f">
    <label>名前</label>
    <input type="text" id="name" name="name" value="Mike" class="form-control" />

    <label>
      <input type="checkbox" id="chck" name="ok" value="ok" checked /> ok?
    </label>

    <p>趣味</p>
    <label>
      <input type="checkbox" id="hbyMovie" name="hbyMovie" checked /> 映画
    </label>
    <label>
      <input type="checkbox" id="hbyComic" name="hbyComic" checked /> マンガ
    </label>

    <p>性別</p>
    <label>
      <input type="radio" id="sexMale" name="sex" value="male" /> 男性
    </label>
    <label>
      <input type="radio" id="sexFemale" name="sex" value="female" /> 女性
        </label>

    <p>リスト</p>
    <select class="form-control" id="lst" name="lst" multiple size=4>
      <option value="lst1" selected>リスト1</option>
      <option value="lst2">リスト2</option>
      <option value="lst3" selected>リスト3</option>
      <option value="lst4">リスト4</option>
      <option value="lst5">リスト5</option>
    </select>

    <p>自由記入</p>
    <textarea class="form-control" rows="3" id="free" name="free">aaaaa</textarea>

    <button type="submit" class="btn btn-default" id="btnSubmit">Submit</button>
</form>

フォームを中断・アラートを出すメソッド

// 入力内容が空かどうか判断する
var checkBlank = function() {
    if (("#name").val() == "") {
        alert("名前が空です")
        return true
    }
    if (("#free").val() == "") {
        alert("自由記入欄が空です")
        return true
    }
    if (("input[name=sex]:checked").val() === undefined) {
        alert("[性別]が選択されていません")
        return true
    }
    if (("#lsts").val() === null) {
        alert("[リスト]が選択されていません")
        return true
    }

    return false
}
// [Submit]ボタンによりイベントが発火
$("#f").submit(function() {
    var isBlank = checkBlank();
    if (isBlank) {
        console.log("stop")
        return false;
    }
});

おわりに

実際に開発現場で開発を行うにあたり、自身のフロントエンドの技術力の乏しさを実感したので、今後JSを中心に学習を進め、その内容を発信していこうと思います！

最後までお読みいただきありがとうございました！