HTML・Javascript・CSS

jQueryで氏名の入力チェックを行う

19分39秒
スポンサーリンク

目次

jQueryで氏名の入力チェックを行う

jQueryで氏名の入力チェックをする方法です。

テキスト入力欄よりフォーカスが外れた時に、入力チェックをします。

氏名（入力欄が１つ）の場合

See the Pen form-name1 by take it easy (@take-it-easy) on CodePen.

HTML

<div class="input-area">
  <label for="name-1">氏　名：</label>
  <input type="text" id="name-1" name="name-1" placeholder="サンプル　太郎" size="43" />
  <div id="err-msg-name" class="error-msg"></div>
</div>

Javascript

$(function () {
  // フォーカスが当たった場合のイベントハンドラ
  $("#name-1").on("focus", function () {
    $("#name-1").removeClass("input-error");
    $("#err-msg-name p").remove();
    $("#err-msg-name").hide();
  });

  // フォーカスが外れた場合のイベントハンドラ
  $("#name-1").on("blur", function () {
    // トリム
    $("#name-1").val($.trim($("#name-1").val()));
    // 入力チェック
    validate_name();
  });
});

/**
 * 氏名の入力チェック
 */
function validate_name() {
  var testVal = $("#name-1").val();
  // 必須チェック
  if (testVal == "") {
    $("#err-msg-name").show().append("<p>氏名は入力必須項目です。</p>");
    $("#name-1").addClass("input-error");
  }
}

姓と名（入力欄が2つ）の場合

See the Pen form-name2 by take it easy (@take-it-easy) on CodePen.

HTML

<div class="input-area">
  <label for="name-1">氏　名：</label>
  <input type="text" id="name-1" name="name-1" placeholder="サンプル" size="20" />
  <input type="text" id="name-2" name="name-2" placeholder="太郎" size="20" />
  <div id="err-msg-name" class="error-msg"></div>
</div>

Javascript

$(function () {
  // フォーカスが当たった場合のイベントハンドラ
  $("#name-1, #name-2").on("focus", function () {
    $("#name-1, #name-2").removeClass("input-error");
    $("#err-msg-name p").remove();
    $("#err-msg-name").hide();
  });

  // フォーカスが外れた場合のイベントハンドラ
  $("#name-1, #name-2").on("blur", function () {
    // トリム
    $("#name-1").val($.trim($("#name-1").val()));
    $("#name-2").val($.trim($("#name-2").val()));
    // 入力チェック
    validate_name();
  });
});

/**
 * 氏名の入力チェック
 */
function validate_name() {
  var val1 = $("#name-1").val();
  var val2 = $("#name-2").val();
  // 必須チェック（姓と名）
  if (val1 == "" && val2 == "") {
    $("#err-msg-name").show().append("<p>氏名は入力必須項目です。</p>");
    $("#name-1, #name-2").addClass("input-error");
  }
  // 必須チェック（姓）
  else if (val1 == "") {
    $("#err-msg-name").show().append("<p>姓は入力必須項目です。</p>");
    $("#name-1").addClass("input-error");
  }
  // 必須チェック（名）
  else if (val2 == "") {
    $("#err-msg-name").show().append("<p>名は入力必須項目です。</p>");
    $("#name-2").addClass("input-error");
  }
}

氏名カナ（入力欄が１つ）の場合

See the Pen form-name3 by take it easy (@take-it-easy) on CodePen.

HTML

<div class="input-area">
  <label for="name-kana-1">氏名カナ：</label>
  <input type="text" id="name-kana-1" name="name-kana-1" placeholder="サンプル　タロウ" size="43" />
  <div id="err-msg-name-kana" class="error-msg"></div>
</div>

Javascript

$(function () {
  // フォーカスが当たった場合のイベントハンドラ
  $("#name-kana-1").on("focus", function () {
    $("#name-kana-1").removeClass("input-error");
    $("#err-msg-name-kana p").remove();
    $("#err-msg-name-kana").hide();
  });

  // フォーカスが外れた場合のイベントハンドラ
  $("#name-kana-1").on("blur", function () {
    // 入力チェック
    $("#name-kana-1").val($.trim($("#name-kana-1").val()));
    // 入力チェック
    validate_name_kana();
  });
});

/**
 * 氏名カナの入力チェック
 */
function validate_name_kana() {
  var testVal = $("#name-kana-1").val();
  // 必須チェック
  if (testVal == "") {
    $("#err-msg-name-kana").show().append("<p>氏名カナは入力必須項目です。</p>");
    $("#name-kana-1").addClass("input-error");
  }
  // 全角カナチェック
  else if (!testVal.match(/^[ァ-ヶー　]+$/)) {
    $("#err-msg-name-kana").show().append("<p>氏名カナは全角カタカナで入力してください。</p>");
    $("#name-kana-1").addClass("input-error");
  }
}

全角カナのチェックは、正規表現を使用してチェックを行っています。

正規表現は、

/^[ァ-ヶー　]+$/

ハイフン、スペースも許可します。

姓カナと名カナ（入力欄が2つ）の場合

See the Pen form-name4 by take it easy (@take-it-easy) on CodePen.

HTML

<div class="input-area">
  <label for="name-kana-1">氏名カナ：</label>
  <input type="text" id="name-kana-1" name="name-kana-2" placeholder="サンプル" size="20" />
  <input type="text" id="name-kana-2" name="name-kana-3" placeholder="タロウ" size="20" />
  <div id="err-msg-name-kana" class="error-msg"></div>
</div>

Javascript

$(function () {
  // フォーカスが当たった場合のイベントハンドラ
  $("#name-kana-1, #name-kana-2").on("focus", function () {
    $("#name-kana-1, #name-kana-2").removeClass("input-error");
    $("#err-msg-name-kana p").remove();
    $("#err-msg-name-kana").hide();
  });
  
  // フォーカスが外れた場合のイベントハンドラ
  $("#name-kana-1, #name-kana-2").on("blur", function () {
    // トリム
    $("#name-kana-1").val($.trim($("#name-kana-1").val()));
    $("#name-kana-2").val($.trim($("#name-kana-2").val()));
    // 入力チェック
    validate_name_kana();
  });
});

/**
 * 氏名の入力チェック
 */
function validate_name_kana() {
  var val1 = $("#name-kana-1").val();
  var val2 = $("#name-kana-2").val();
  // 必須チェック（姓カナと名カナ）
  if (val1 == "" && val2 == "") {
    $("#err-msg-name-kana").show().append("<p>氏名カナは入力必須項目です。</p>");
    $("#name-kana-1, #name-kana-2").addClass("input-error");
  }
  // 必須チェック（姓カナ）
  else if (val1 == "") {
    $("#err-msg-name-kana").show().append("<p>姓カナは入力必須項目です。</p>");
    $("#name-kana-1").addClass("input-error");
  }
  // 必須チェック（名カナ）
  else if (val2 == "") {
    $("#err-msg-name -kana").show().append("<p>名カナは入力必須項目です。</p>");
    $("#name-kana-2").addClass("input-error");
  }
  // 全角カナチェック（姓カナと名カナ）
  else if (!val1.match(/^[ァ-ヶー　]+$/) && !val2.match(/^[ァ-ヶー　]+$/)) {
    $("#err-msg-name-kana").show().append("<p>氏名カナは全角カタカナで入力してください。</p>");
    $("#name-kana-1, #name-kana-2").addClass("input-error");
  }
  // 全角カナチェック（姓カナ）
  else if (!val1.match(/^[ァ-ヶー　]+$/)) {
    $("#err-msg-name-kana").show().append("<p>姓カナは全角カタカナで入力してください。</p>");
    $("#name-kana-1").addClass("input-error");
  }
  // 全角カナチェック（名カナ）
  else if (!val2.match(/^[ァ-ヶー　]+$/)) {
    $("#err-msg-name-kana").show().append("<p>名カナは全角カタカナで入力してください。</p>");
    $("#name-kana-2").addClass("input-error");
  }
}

全角カナのチェックは、正規表現を使用してチェックを行っています。

正規表現は、

/^[ァ-ヶー　]+$/

ハイフン、スペースも許可します。

スポンサーリンク
レンタルサーバー











おすすめの記事