Detect the error message in the input field

问题

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:

回答1:

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>

回答2:

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>

回答3:

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>

来源：https://stackoverflow.com/questions/62496266/detect-the-error-message-in-the-input-field

标签

javascript

html

validation

input

error-messaging