【jQuery】フォームの入力チェック|バリデーション

フォームのバリデーションって作るの結構手間だよね。
チェックする項目が多いと時間かかるしプラグインを使っても良いけど、自分で作った方が修正も手軽だしなんたってカスタマイズしやすいじゃん！
だからコピペ用に作りました。ご自由にどうぞ！

HTML

<form>
  <h4>デモフォーム（ボタンを押しても送信しません）</h4>
  <div class="errorMsg"></div>
  <label>
    <span>お名前</span>
    <input type="text" name="name">
  </label>
  <label>
    <span>メールアドレス</span>
    <input type="text" name="email">
  </label>
  <label>
    <span>電話番号</span>
    <input type="text" name="number">
  </label>
  <label>
    <span>お問い合わせ内容</span>
    <textarea type="text" name="body" row="4"></textarea>
  </label>
  <div class="private">
    <span>個人情報について</span>
    <span>個人情報についてのテキスト</span>
  </div>
  <label>
    <input type="checkbox" name="privacy_check">
    個人情報に同意する
  </label>
  <div class="submit">ボタン</div>
</form>

jquery

$(".submit").on("click", function() {
  formCheck();
});

function formCheck() {
  // 電話番号の全角数字、全角ハイフンを半角に変換
  var number = $('input[name="number"]').val().replace(/[０-９‐－―ー]/g,function(s){
    return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
  });
  // 電話番号のハイフンを削除
  number = number.replace(/-/g,'');

  if($('input[name="name"]').val() == "") {// 名前があるか
    $(".errorMsg").text("お名前を入力してください");
  } else if($('input[name="email"]').val() == "") {// メールアドレスがあるか
    $(".errorMsg").text("メールアドレスを入力してください");
  } else if(!$('input[name="email"]').val().match(/^[A-Za-z0-9.]+[\w-]+@[\w\.-]+\.\w{2,}$/)) {// メールアドレスが正しく入力されているか（abc@abc.abcになっているか）
    $(".errorMsg").text("メールアドレスを正しく入力してください");
  } else if (number.length < 10) {// 電話番号が正しく入力されているか
    $(".errorMsg").text("電話番号を正しく入力してください");
  } else if($('textarea[name="body"]').val() == "") {// テキストエリアの内容があるか
    $(".errorMsg").text("お問い合わせ内容を入力してください");
  } else if(!$('input[name="privacy_check"]').prop("checked")) {// チェックボックスにチェックが入っているか
    $(".errorMsg").text("個人情報に同意してください");
  } else {
    $(".errorMsg").text("");
    alert("チェックOKです！");
  }
}