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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2290閲覧

入力フォームバリデーションにおけるjQuery「.match()」の使い方

sandwich

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/09/01 15:02

編集2018/09/01 18:35

前提・実現したいこと

お世話になります。
入力フォームのバリデーションを実装しています。

チェック項目は「ホワイトリスト、URLの数、カンマ、スペース」の4つです。

そのチェックに必要だと考えているjQuery「.match()」の使い方について教えて頂きたく質問致しました。
以下、宜しくお願い致します。

発生している問題・エラーメッセージ

後述するソースコードで「.match()」の使い方が間違っているようで、nullのエラーがconloseに表示されますが、直し方がわかりません。

TypeError: inputVal.match(...) is null

該当のソースコード

<input id="input" placeholder="https://teratail.com/" type="text"> <p id="mes">URLを入力してね</p> <p id="submit">送信</p> <script> $('#input').on('input', function() { var $this = $(this); var inputVal = $this.val(); var countUrl = inputVal.match('http').length; var countComma = inputVal.match(',').length; var countSpace = inputVal.match(' ').length; var whitelist = ['https://example.com', 'http://example.net']; var regex = new RegExp(whitelist.join('|')); //ホワイトリスト以外、URL2つ以上、カンマがある、スペースがある場合は送信禁止 if ( !(regex.test(inputVal)) || countUrl >= 2 || countComma >= 1 || countSpace >= 1 ) { $('#mes').text('URLが間違いです。'); $('#submit').addClass('clickfalse'); } //そうでなければ送信許可 else { $('#mes').text('送信できます。'); $('#submit').removeClass('clickfalse'); } }); </sctip> <style> .cliskfalse { pointer-events: none; } </style>

試したこと

正規表現で
var countUrl = inputVal.match(/(http)/ig).length;
としたところ上述したnullのエラーはなくなったものの、それでもif内は機能しませんでした。
直し方が分かる方、宜しくお願い致します。

補足情報(FW/ツールのバージョンなど)

jsfiddleにて各ブラウザで動作しないことを確認済みです。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/09/01 15:42

タイトル部分、much ではなく、 match です。修正願います。
sandwich

2018/09/01 15:44

失礼致しました。
guest

回答1

0

ベストアンサー

jQuery の公式サイトより、API Document を参照します。
https://api.jquery.com/

検索フォームで「match」を検索します。

イメージ説明

そうすると、「match」というメソッドは見つかりません。

どういうことかというと、 match() という関数は jQuery の関数ではない ということで、JavaScript
の関数であるということです。

「javascript match」でGoogle検索すると、https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match

MDNのサイトが見つかるので、こちらを調べます。
イメージ説明

javascript

1str.match()

は「マッチが見つからなかった場合はnullを返します。」なので、これに続く、.length のところでエラーになっていることがわかります。

javascript

1null.length

が同じエラーを返すことと同義です。

javascript

1var countUrl = inputVal.match('http').length;

この書き方がいけないことがわかります。
マッチしているときはエラーにならないが、マッチしていないときは、.lengthがあるがためにエラーになってしまいます。

javascript

1var countUrl = inputVal.match('http');

マッチしていれば、countUrlは配列、マッチしていなければ、null になります。

投稿2018/09/01 19:07

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

sandwich

2018/09/01 22:08

ああ、そうだったんですね。ご丁寧にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問