jQueryで入力チェック

前提

ほんの少しバリデーションかけたいだけの際、プラグインはとても大きく、癖があり不要に思えます。
inputのpatternやvalidationに使われる属性、
はたまたjQueryのvlidationプラグインを使わずに自力で入力チェックを行いたいと思います。
リアルタイムの入力チェックではなく、
入力エリアからフォーカスを失ったタイミングでチェックします。

---

※結構初心者の頃に作成したものなので、いずれリライトします
(2020/09/16 必須/数値/エラーのときはsubmitしない リライト済み)

---

必須チェック

index.html

<input type="text" class="require"> 

validation.js

$(function () {
  //バリデーション
  $("input.require").on("blur", function () {
    let error;
    let value = $(this).val();
    if (value == "" || !value.match(/[^\s\t]/)) {
      error = true;
    }

    if (error) {
      //エラー時の処理
      alert('必須ですよ');
    }
  });
});

See the Pen jq-required by natusme (@natsume0718) on CodePen.

解説

スペースなどの空白も不可です。
inputのrequireクラスからフォーカスがなくなったら発火するようにします。

validation.js

 !value.match(/[^\s\t]/)

matchは文字列の中から指定したものを取り出すメソッドです。
\sの空白と\tのタブ以外にマッチするか判定します
マッチしない→空or空白orタブ

数字のみ

index.html

<input type="number" class="num-only"> 

validation.js

$(function () {
  //バリデーション
  $("input.num-only").on("blur", function () {
    let error;
    let value = $(this).val();
    if (!Number.isFinite(Number(value))) {
      error = true;
    }

    if (error) {
      //エラー時の処理
      alert('数値じゃない');
    }
  });
});

See the Pen jq-numonly by natusme (@natsume0718) on CodePen.

解説

inputのnum-onlyクラスからフォーカスがなくなったら発火するようにし、
フォーカスが外れた入力エリアの値をとって判定します。

if (!Number.isFinite(Number(value)))について
まず、Number(value)で入力の値を数値に変換します。
このときに、数字以外だとNaNになります
Number.isFiniteは与えられた値が有限数かどうかを示します。
NaNの場合falseになります

ひらがな

index.html

<input type="text" class="kana-only"> 

validation.js

$(function () {
  //バリデーション
  $("input.kana-only").on("blur", function () {
    let error;
    let value = $(this).val();
    if (value.match(/[ぁ-ん]/g)) {
      error = true;
    }

    if (error) {
      //エラー時の処理
    }
  });
});

解説

入力された文字列内からひらがなを取得します。
もし、ひらがながなかったらエラーにします。

おまけ

エラーメッセージ

入力エリアの横にエラーメッセージを表示します。
エラーじゃない時は消えるようにします。

validation.js

if(error)
{
  //エラー時の処理

  //エラーで、エラーメッセージがなかったら
  if(!$(this).nextAll('span.error-info').length)
  {
    //メッセージを後ろに追加
    $(this).after('<span class = "error-info">入力エラーです</span>');
  }
}
else
{
  //エラーじゃないのにメッセージがあったら
  if($(this).nextAll('span.error-info').length)
  {
    //消す
    $(this).nextAll('span.error-info').remove();
  }
}

解説

nextAll使っているのは
afterで兄弟要素として追加しているからです。
nextでやると複数バリデーションして、メッセージ出ている時に、消えなくなってしまうためです。

エラーのときはsubmitしない

入力チェックを行い、エラーがあった場合alertして送信を止めます。

index.html

<form action="" method="post">
  <input type="number" class="num-only">
  <button type="submit" value="sub">送信</button>
</form>

validation.js

$("form").on("submit", function () {
  let error = $(this).find("span.error-info").length;

  if (error) {
    alert("入力エラーがあります");
    return false;
  }
});

解説

form内から、エラーメッセージとして追加した子要素でspanでerror-infoのクラスの存在で判定しています。
あまり直感的でないのと、クラス名変更すると面倒なので

送信前に入力チェックを行ってみましょう

index.html

<form action="" method="post">
  <input type="number" class="num-only">
  <button type="submit" value="sub">送信</button>
</form>

validation.js

$("form").on("submit", function (e) {
  let error;

  // クラスは複数につけられるので、全部チェックする必要がある
  $("input.num-only").each(function () {
    let value = $(this).val();
    if (!Number.isFinite(Number(value))) {
      error = true;
    }

    if (error) {
      //エラー時の処理

      //preventDefaultで、デフォルトの挙動を止められる→submitを止める
      return e.preventDefault();
    }
  });
});