質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

365閲覧

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

taka_oct092018

総合スコア133

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/05/19 15:29

最初に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(入力の例1) 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(入力の例2) 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()をテンプレートのようにとらえて使うのが無難でしょうか。
簡潔かつ堅硬な解決策がございましたら教えて下さい。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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様 返信ありがとうございます。 了解致しました。 検索することで利用可能なコードも探してみます。
guest

回答2

0

ベストアンサー

<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

総合スコア21186

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taka_oct092018

2023/05/22 11:49

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

2023/05/22 22:10

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

2023/05/23 05:32

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

0

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

【追記】

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

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

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

投稿2023/05/19 22:39

編集2023/05/19 22:47
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taka_oct092018

2023/05/22 11:29

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

退会済みユーザー

2023/05/22 11:36

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

2023/05/22 13:45

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問