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

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

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

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

jQuery
1//数値のチェック
2if($(this).hasClass("number")) {
3  if(Number.isNaN($(this).val())){ // 編集後
4    $(this).parent().prepend("<p class='err'>数値のみ入力可能です</p>");
5  }
6}
7（入力の例２）
82222と333を入力すると、エラーメッセージは表示されず。意図した通りの挙動。
9aaaaと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()をテンプレートのようにとらえて使うのが無難でしょうか。
簡潔かつ堅硬な解決策がございましたら教えて下さい。

maisumakun

2023/05/19 23:25

> 期待通りには動いてくれませんでした。どのような結果を期待して、実際にはどうなったのでしょうか？

m.ts10806

2023/05/20 04:39

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

退会済みユーザー

2023/05/20 23:04

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

taka_oct092018

2023/05/22 11:37

>> maisumakun様いつも回答ありがとうございます。入力欄の親要素にエラーメッセージを表示したかったのですが、何も起こりませんでした。 >> m.ts10806様返信ありがとうございます。将来的には正規表現を駆使したコードを書けるようになりたいです。 >> SurferOnWww様返信が遅くなり申し訳ございません。

m.ts10806

2023/05/23 01:01

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

taka_oct092018

2023/05/23 05:33

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

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

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

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

投稿2023/05/20 00:03

int32_t

総合スコア21929

taka_oct092018

2023/05/22 11:49

int32_t様いつもアドバスありがとうございます。教えて頂いた「validity.patternMismatch」は今回始めて知りました。数値の検証は改善しましたがエラーメッセージが、「入力された値がフィールドに指定された書式と異なります。」というものに変更され、元々意図したものとは別になるという問題が生じてしまいました。今私は、検証時にエラーが発生した場合に、「$(this).parent().prepend("<p class='err'>数値のみ入力可能です</p>")」を実行出来る方法があるかを調べております。