jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる

requiredで入力していないと「このフィールドを入力してください」しか出ないし、ほかの入力がある場合、エラー表示がばらばらになるので、requiredの動きをjQueryでつくります。
それと、文字数制限のバリデーションもつくります。

jQuery関連記事

1. requiredのような必須入力のバリデーションチェック

HTML

<input type="text" class="required" data-required="住所">
<button id="require_check">確認</button>

JavaScript(function)

function requiredcheck() {
  $('.required').each(function () {
    if ($(this).val() == "") {
      var noval = $(this).data('required');
      $('#errorbox').append(noval + "の項目が入力されていません。<br>");
    }
  });
};

.requiredが付いた全ての要素のvalueを確認しに行くので、簡単にバリデーションできます。
data-requiredに項目名を変えることで、どこが入力されていないかをわかりやすくしています。

JavaScript(呼び出し側)

$('#require_check').click(function () {
  requiredcheck();
});

2. 文字数制限のバリデーションチェック

HTML

<input type="text" id="length" data-required="">
<button id="require_check">確認</button>

JavaScript(function)

function text_length(idname, category, judgeint) {
  var cval = $("#" + idname).val();
  if (cval) {
    size = cval.length;
    if (size > judgeint) {
      $('#errorbox').append(category + "は" + judgeint + "文字以内で入力してください。<br>");
    }
  }
}

テキストボックスにidを振って、それを利用します。
functionの引数である、idnameに該当のid属性を渡すことで、いろんな場所でテキストボックスやテキストエリアの文字数制限チェックができるようになります。
該当のvalueを取得し、引数judgeintと比較し、超えていればエラーを出します。

JavaScript(呼び出し側)

$('#require_check').click(function () {
  text_length("length", "タイトル", 15);
});

functionの引数である、idnameにlengthを、categoryにエラー時に表示する項目を、judgeintに制限する文字数を渡して呼び出します。