title: Detect the error message in the input field
body: <p>How can I show the message if the user types a restricted symbol?</p>
  <p>For example, if the user types <code>*</code> in the input field, the error message can show <code>A filename cannot contain any of the following characters: \/:*?&quot;&lt;&gt;|</code>. I hope someone can guide me how to do it. Thanks.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;h1&gt;How to show error message&lt;/h1&gt;
  
  
  &lt;input type="text" class="form-control blank" id="function_code" name="function_code" title="function_code" onpaste="return false"&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script&gt;
  document.getElementById("function_code").onkeypress = function(e) {
  var chr = String.fromCharCode(e.which);
  if ("&gt;&lt;/\":*?|".indexOf(chr) &gt;= 0)
  return false;
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>My expected result is like below the picture if the user types the restrict symbol in the input field:</p>
  <p><a href="https://i.stack.imgur.com/ZSfmk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZSfmk.png" alt="output1" /></a></p>