プラグインを使わず、簡易的なリアルタイムバリデーションを実装する

formの離脱率を下げるために、バリデーションを入れるのは効果的だと思います。
今回はプラグインを使わず、簡易的なリアルタイムバリデーションのご紹介です。

サンプル例は5文字以上入力があったら、エラーメッセージを表示するというものになります。

See the Pen validation by This is standard (@koutafunahashi) on CodePen.

//エラーメッセージの表示
function showErrMsg(target) {
  target.fadeIn();
  setTimeout(function(){
    target.fadeOut();
  }, 3000);
}

//5文字以上でエラーを出す
$("#input").on("input change", function(){
  if($(this).val().length > 5){
    showErrMsg($(".error"));
  }
});

エラーメッセージは正規表現を変えば汎用的になります。