Detect the error message in the input field

Question

How can I show the message if the user types a restricted symbol?

For example, if the user types * in the input field, the error message can show A filename cannot contain any of the following characters: \/:*?"<>|. I hope someone can guide me how to do it. Thanks.

<!DOCTYPE html>
<html>
<body>

<h1>How to show error message</h1>


<input type="text" class="form-control blank" id="function_code" name="function_code" title="function_code" onpaste="return false">

</body>
</html>

<script>
document.getElementById("function_code").onkeypress = function(e) {
var chr = String.fromCharCode(e.which);
if ("></\":*?|".indexOf(chr) >= 0)
return false;
};
</script>

My expected result is like below the picture if the user types the restrict symbol in the input field:

score 5 · Accepted Answer · edited Jun 21 '20 at 15:19

5

Use the input event along with a regular expression, like so:

const input = document.getElementById("function_code");
const error = document.getElementById('error');
const regex = /[\\\/:*?"<>|]+/;

input.addEventListener('input', (e) => {
  const value = e.target.value;

  if (regex.test(value)) {
    input.value = value.slice(0, value.length - 1);
    error.textContent = 'A filename cannot contain any of the following characters: \/:*?"<>|';
  } else {
    error.textContent = '';
  }
});

input {
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 1.2rem;
}

#error {
  display: block;
  color: red;
  margin: 5px 0 0 0;
}

<input type="text" id="function_code" name="function_code">
<span id="error"></span>

edited Jun 21 '20 at 15:19

Trevor Reid

3,310
4
27
46

answered Jun 21 '20 at 09:07

Yousaf

27,861
6
44
69

Thanks your answer. But I just want these symbol \/:*?"<>| become restrict. Your code is all symbols restricted right? – Jun 21 '20 at 09:16
Thanks you are right. How can if type any \/:*?"<>| , then wont show in the input fields, just show the message – Jun 21 '20 at 09:48
Can you updated input.style.display = 'none' your answer? – Jun 21 '20 at 12:44
Because when the user type * in the input field, * direct pop up the error message. But * didn't appear in the input field – Jun 21 '20 at 12:56
Yes. Almost right. Just these symbols /:*?"<>| dont' want show in the input fields. – Jun 21 '20 at 13:03
If user type these /:*?"<>|, the error message will appear, but /:*?"<>| don't want show in the input field. – Jun 21 '20 at 13:04
OK. Is possible don't hide the input? – Jun 21 '20 at 13:07
Thanks Yousaf. This is what I want. – Jun 21 '20 at 13:24

Roland Balogh · Answer 2 · 2020-06-21T09:10:40.523

Firstly I would wrap the input in a form. After that you can use the setCustomValidity function for the input field to set a custom message if the condition is true. When you hit enter, or submit the form, you will see the error message. This way you can give any custom message for your input. Pay attention to the else block for handling no error cases.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity

<!DOCTYPE html>
<html>

<body>

<h1>How to show error message</h1>

<form>
    <input type="text" class="form-control blank" id="function_code" name="function_code" title="function_code" onpaste="return false">
    <button type="submit">Submit</button>
</form>

<script>
    document.getElementById("function_code").onkeypress = function(e) {
        var chr = String.fromCharCode(e.which);
        if ("></\":*?|".indexOf(chr) >= 0) {
          this.setCustomValidity('A filename cannot contain any of the following characters: \/:*?"<>|');
        } else {
          this.setCustomValidity('');
        }
    };
</script>

</body>

</html>

Edwin Dijas Chiwona · Answer 3 · 2020-06-21T09:07:42.963

Use HTML5 Pattern Match, below I have used the pattern ([a-zA-Z0-9]+) which simply means characters only latin alphabet and numbers 0-9. You can include the space character with ([a-zA-Z0-9]+\s{1}[a-zA-Z0-9]+)

You can learn more about regex here

This will not prevent author from entering wrong keypresses, it will only validate input. I will Include another approach to show custom error.

<form >
<input type="text" class="form-control blank" id="function_code" name="Option an" title="A name cannot contain irregular characters" pattern='([a-zA-Z0-9]+)' onpaste="return false">
<button >Submit</button>
</form>

Second approach. Use Javascript and write error to a div tag.

<!DOCTYPE html>
<html>
<body>

<h1>How to show error message</h1>


<input type="text" class="form-control blank" id="function_code" name="function_code" title="function_code" onpaste="return false">
<div id="error-box"></div>

</body>
</html>

<script>

function showError (key) {
  var errBox = document.querySelector("#error-box");
  errBox.textContent = "The character " + key.toString() + " is not allowed!";
  //Dismiss the error
  window.setTimeout(function () {
      errBox.textContent = "";
  }, 10000)
}


document.getElementById("function_code").onkeypress = function(e) {
var chr = String.fromCharCode(e.which);

if ("></\":*?|".indexOf(chr) >= 0)
  showError(chr)
  return false;
};
</script>

Thanks for your answer. How can just prevent these symbol only >\":*?| — , Jun 21 '20 at 08:58
Added a javascript approach, you will have to style the div yourself. Or You have to customise regex. For your question the pattern is [^><\/\\\":\*\?\|]+ — Edwin Dijas Chiwona, Jun 21 '20 at 09:08
Your answer almost correct. You code input cannot let me input other character — , Jun 21 '20 at 12:52

Detect the error message in the input field

3 Answers3

Linked