ウェブサイトから入力された値の数値判定の方法について jQuery

Question

最初にisNaN()とNumber.isNaN()を調べてみました。
コードは「Web制作の現場で使うjQueryデザイン入門[改訂新版]P236」からです。

<dt>郵便番号</dt>
<dd>
  <input class="validate number" maxlength="4" name="zip1" size="4" type="text">-
  <input class="validate number" maxlength="3" name="zip2" size="3" type="text">
</dd>

//数値のチェック
if($(this).hasClass("number")) {
  if(.isNaN($(this).val())){ // 編集前
    $(this).parent().prepend("<p class='err'>数値のみ入力可能です</p>");
  }
}
（入力の例１）
2222と333を入力すると、エラーメッセージは表示されず。意図した通りの挙動。
aaaaとbbbを入力すると、エラーメッセージが表示される。意図した通りの挙動。
このコードの記法は結果を見る限り有効ですが、
型変換の有無・戻り値の真偽による作動原理が分かりにくいです。

//数値のチェック
if($(this).hasClass("number")) {
  if(Number.isNaN($(this).val())){ // 編集後
    $(this).parent().prepend("<p class='err'>数値のみ入力可能です</p>");
  }
}
（入力の例２）
2222と333を入力すると、エラーメッセージは表示されず。意図した通りの挙動。
aaaaとbbbを入力すると、エラーメッセージは表示されず。意図しない挙動。

以下のサイトで調べてみましたが、内容が難解過ぎてほとんど分かりませんでした。
「isNaN()」は欠陥があるので、使いこなせる自信がありません。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN
https://js.studio-kingdom.com/javascript/global/is_nan

その他、$.isNumeric()・isFinite()・Number.isFinite()なども試してみましたが、
どれも期待通りには動いてくれませんでした。
正規表現によるコードは今の私には難しすぎて書けません。
とりあえず、.isNaN()をテンプレートのようにとらえて使うのが無難でしょうか。
簡潔かつ堅硬な解決策がございましたら教えて下さい。

Comments

[maisumakun]

> 期待通りには動いてくれませんでした。

どのような結果を期待して、実際にはどうなったのでしょうか？

[m.ts10806]

正規表現といってもメジャーな判定であれば探せばすぐ出てくるので、自ら作らなきゃならないシーンは稀有かと思います。

[退会済みユーザー]

質問者さん、無言ですが、回答が出ているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。とにかく無言は NG です。

[taka_oct092018]

>> maisumakun様
いつも回答ありがとうございます。
入力欄の親要素にエラーメッセージを表示したかったのですが、何も起こりませんでした。

>> m.ts10806様
返信ありがとうございます。
将来的には正規表現を駆使したコードを書けるようになりたいです。

>> SurferOnWww様
返信が遅くなり申し訳ございません。

[m.ts10806]

駆使する必要はなく、多くは代替手段かネットで探して出てくるもので事足りるということです。
私自身も基本は代替手段の模索から入って事足りてるので自ら組み込むのは未だに苦手ですが、それでも業務に支障はないです。

[taka_oct092018]

m.ts10806様

返信ありがとうございます。
了解致しました。
検索することで利用可能なコードも探してみます。

Answer 1

<input> の値 ($(this).val() や this.value)は文字列であって、数値ではありません。そうなると isNaN() は使いにくいですし、parseInt() も数値前後のゴミを許容したりするのでバリデーションには向いていません。

やはり、正規表現でやるのがもっともシンプルでしょう。

<!-- pattern 属性を足す。4 と 3 の順番はこれでいい? -->
  <input class="validate number" maxlength="4" name="zip1" size="4" pattern="[0-9]{4}" type="text">-
  <input class="validate number" maxlength="3" name="zip2" size="3" pattern="[0-9]{3}" type="text">

//数値のチェック
if ($(this).hasClass("number")) {
  if (this.validity.patternMismatch) {

Comments

[taka_oct092018]

int32_t様

いつもアドバスありがとうございます。
教えて頂いた「validity.patternMismatch」は今回始めて知りました。
数値の検証は改善しましたがエラーメッセージが、
「入力された値がフィールドに指定された書式と異なります。」というものに変更され、
元々意図したものとは別になるという問題が生じてしまいました。

今私は、検証時にエラーが発生した場合に、
「$(this).parent().prepend("<p class='err'>数値のみ入力可能です</p>")」を
実行出来る方法があるかを調べております。

[int32_t]

`<form>` に novalidate 属性を足せば元にもどると思います。

[taka_oct092018]

int32_t様

いつもアドバイスありがとうございます。
novalidate属性を設置することで不具合が解消されました。
専門書でも解説されてない技術が多くあることに驚いています。

Answer 2

ユーザー入力が正しい郵便番号になっているかの検証を JavaScript で行いたいのですよね？ であれば、正規表現を使ってはいかがですか。

【追記】

以下の文を見落としてました。すみません。

正規表現によるコードは今の私には難しすぎて書けません。

でも、正規表現を使うしか現実的な解決策はないと思います。少なくとも質問者さんの今のやり方より難しいと言うことはないはずです。

Comments

[taka_oct092018]

SurferOnWww様、回答ありがとうございます。

私からの返信が遅くなり申し訳ございません。
int32_tさんからのアドバイスにより、数値の検証自体は解決が出来たのですが、
エラーメッセージの表示が意図しない形になってしまうという別問題が発生しており、
悪戦苦闘しております。

[退会済みユーザー]

それはこのスレッドの質問とは別の問題なので、新たに別のスレッドを立てて質問した方が良さそうです。

[taka_oct092018]

SurferOnWww様、返信ありがとうございます。
了解致しました。