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

プロモーションが含まれています

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の引数である、idnamelengthを、categoryエラー時に表示する項目を、judgeint制限する文字数を渡して呼び出します。

コメント

タイトルとURLをコピーしました