質問編集履歴

2 誤字修正、情報修正、タグ追加

sandwich

sandwich score 12

2018/09/02 03:35  投稿

入力フォームバリデーションにおけるjQuery「.match()」の使い方
### 前提・実現したいこと
お世話になります。
入力フォームのバリデーションを実装しています。
jQuery「.much()」の使い方について教えて頂きたく質問させて頂きました。
チェック項目は「ホワイトリスト、URLの数、カンマ、スペース」の4つです。
そのチェックに必要だと考えているjQuery「.match()」の使い方について教えて頂きたく質問致しました。
以下、宜しくお願い致します。
### 発生している問題・エラーメッセージ
後述するソースコードで「.much()」の使い方が間違っているようで、nullのエラーがconloseに表示されますが、直し方がわかりません。
後述するソースコードで「.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にて各ブラウザで動作しないことを確認済みです。
  • 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

sandwich score 12

2018/09/02 00:43  投稿

入力フォームバリデーションにおけるjQuery「.much()」の使い方
入力フォームバリデーションにおけるjQuery「.match()」の使い方
### 前提・実現したいこと
お世話になります。
入力フォームのバリデーションを実装しています。
jQuery「.much()」の使い方について教えて頂きたく質問させて頂きました。
以下、宜しくお願い致します。
### 発生している問題・エラーメッセージ
後述するソースコードで「.much()」の使い方が間違っているようで、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にて各ブラウザで動作しないことを確認済みです。
  • jQuery

    11113 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る