Home>
Input form validation is implemented.

There are four check items: white list, number of URLs, comma, space.

I asked you to tell me how to use jQuery ".match ()" that I think is necessary for the check.
Below, thank you.

Error message

It seems that the usage of ".match ()" is wrong in the source code described later, and a null error is displayed in conlose, but I do not know how to fix it.

TypeError: inputVal.match (...) is null
Applicable source code
<input placeholder = "https://StackOverflow.com/" type = "text">
<p>Enter URL</p>
<p>Send</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 ('|'));
  // Do not send if there are more than 2 URLs, commas, or spaces other than whitelist
  if (! (regex.test (inputVal)) ||
        countUrl>= 2 ||
        countComma>= 1 ||
        countSpace>= 1) {
    $('# mes'). text ('URL is wrong.');
    $('# submit'). addClass ('clickfalse');
  }
  // otherwise send permission
  else {
    $('# mes'). text ('You can send it')
    $('# submit'). removeClass ('clickfalse');
  }
});
</sctip>
<style>
.cliskfalse {
  pointer-events: none;
}
</style>
Tried

Regular expressions
var countUrl = inputVal.match (/ (http)/ig) .length;
As a result, the null error mentioned above disappeared, but it still didn't work inside if.
The person who understands how to fix it would appreciate your favor.

Supplemental information (FW/tool version etc.)

It has been confirmed that jsfiddle does not work with each browser.

  • Answer # 1

    Reference API Document from jQuery official website.
    https://api.jquery.com/

    Search for "match" in the search form.

    Then you can't find a method called "match".

    What does that mean?The function match () is not a jQuery function, JavaScript
    Is a function of

    Google search for "javascript match" https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/match

    MDN site is found, so check here.

    str.match ()

    is "null if no match is found", so you can see that there is an error at.length.

    null.length
    is equivalent to

    returning the same error.

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

    I understand that this way of writing is not good.
    If there is a match, no error will occur, but if it does not match, an error will occur due to the presence of.length.

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

    If there is a match,countUrlis an array, otherwise it is null.