質問編集履歴

2 誤字修正、情報修正、タグ追加 sandwich score 12 2018/09/02 03:35 投稿

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

### 前提・実現したいこと

お世話になります。

入力フォームのバリデーションを実装しています。

jQuery「.much()」の使い方について教えて頂きたく質問させて頂きました。

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

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

以下、宜しくお願い致します。

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

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

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

```

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

```

### 該当のソースコード

```

<p id="mes">URLを入力してね</p>

$('#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('|'));

//ホワイトリスト以外、URL２つ以上、カンマがある、スペースがある場合は送信禁止

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にて各ブラウザで動作しないことを確認済みです。

jQuery

11113 questions

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

JavaScript

28959 questions

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

HTML

17815 questions

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

1 タイトル誤字修正 sandwich score 12 2018/09/02 00:43 投稿

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