前提・実現したいこと
お世話になります。
入力フォームのバリデーションを実装しています。
チェック項目は「ホワイトリスト、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にて各ブラウザで動作しないことを確認済みです。
回答1件
あなたの回答
tips
プレビュー