jqueryでvalidationを実装する方法

はじめに

jqueryでのvalidation実装。
ありがちな機能ではありますが、久々に実装する機会があったのでメモ。
jqueryのプラグインとか探せば色々ありますが、過去にかゆいところに手が届かない的な事もあったので今回は全て自前で実装してみました。

機能としては
・入力項目として名前、Emailがある
・必須チェック
・文字数チェック
・Emailの形式チェック
・リアルタイムでチャック
・入力チェックがOKになるまで送信ボタンは押せないようにする

実装

html

<style>
.err {
  color: red;
  display:inline;
}
</style>

<form method="post">
  名前：<input type="text" name="name" id="name"><div class="err" id="err_name"></div>
  Email：<input type="text" name="email" id="email"><div class="err" id="err_email"></div>
  <input type="submit" id="submit" value="送信"/>
</form>
<script>

js

$(function(){
  // エラーメッセージとか
  var ERROR_LENGTH = "4文字以内で入力してください";
  var ERROR_FORMAT = "形式が正しくありません";
  var ERROR_REQUIRE = "必須項目です";
  var NAME_MAX_LENGTH = 4;

  // 入力可能フラグ
  flgName = false;
  flgEmail = false;

  $("#err_name").html(ERROR_REQUIRE);
  $("#err_email").html(ERROR_REQUIRE);

  function enableSubmit()
  {
    if (flgName && flgEmail) {
      $("#submit").attr("disabled",false);
    } else {
      $("#submit").attr("disabled",true);
    }
  }

  enableSubmit();
  
  $("#name").bind("keydown keyup",function(event) {
    if ($(this).val().length <= 0) {
      $("#err_name").html(ERROR_REQUIRE);
    } else if (NAME_MAX_LENGTH < $(this).val().length) {
      $("#err_name").html(ERROR_LENGTH);
    } else {
      $("#err_name").html("");
    }
    flgName = !$("#err_name").html();
    enableSubmit();
  });

  $("#email").bind("keydown keyup",function(event) {
    if ($(this).val().length <= 0) {     
      $("#err_email").html(ERROR_REQUIRE);
    } else if (!$(this).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)) {
      $("#err_email").html(ERROR_FORMAT);
    } else {
      $("#err_email").html("");
    }
    flgEmail = !$("#err_email").html();
    enableSubmit();
  });
});
</script>

意外と長くなった。今更的な実装でしたが、
チートシートとして1つ用意しておけば色々使えそう

以上です