jQueryで入力チェック


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

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

---


#必須チェック
```html:index.html
<input type="text" class="require"> 
```
```js: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('必須ですよ');
    }
  });
});
```

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="natsume0718" data-slug-hash="QWNBepa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jq-required">
  <span>See the Pen <a href="https://codepen.io/natsume0718/pen/QWNBepa">
  jq-required</a> by natusme (<a href="https://codepen.io/natsume0718">@natsume0718</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>


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

```js:validation.js
 !value.match(/[^\s\t]/)
```
matchは文字列の中から指定したものを取り出すメソッドです。
\sの空白と\tのタブ以外にマッチするか判定します
マッチしない→空or空白orタブ


#数字のみ
```html:index.html
<input type="number" class="num-only"> 
```
```js: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('数値じゃない');
    }
  });
});

```

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="natsume0718" data-slug-hash="wvGxVyr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jq-numonly">
  <span>See the Pen <a href="https://codepen.io/natsume0718/pen/wvGxVyr">
  jq-numonly</a> by natusme (<a href="https://codepen.io/natsume0718">@natsume0718</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>


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

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


#ひらがな
```html:index.html
<input type="text" class="kana-only"> 
```
```js:validation.js
$(function () {
  //バリデーション
  $("input.kana-only").on("blur", function () {
    let error;
    let value = $(this).val();
    if (value.match(/[ぁ-ん]/g)) {
      error = true;
    }

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

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

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

```js: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して送信を止めます。

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

```

```js:validation.js
$("form").on("submit", function () {
  let error = $(this).find("span.error-info").length;
  
  if (error) {
    alert("入力エラーがあります");
    return false;
  }
});

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

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

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

```

```js: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();
    }
  });
});

```

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>