Обнаружить сообщение об ошибке в поле ввода - PullRequest
Новая
       29

Обнаружить сообщение об ошибке в поле ввода

3 голосов
/ 21 июня 2020

Как я могу показать сообщение, если пользователь вводит ограниченный символ?

Например, если пользователь вводит * в поле ввода, в сообщении об ошибке может отображаться A filename cannot contain any of the following characters: \/:*?"<>|. Надеюсь, кто-нибудь подскажет, как это сделать. Спасибо. 

<!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>

Мой ожидаемый результат такой же, как на картинке, если пользователь вводит ограничивающий символ в поле ввода:

output1

Ответы [ 3 ]

4 голосов
/ 21 июня 2020

Используйте событие input вместе с регулярным выражением, например: 

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 голосов
/ 21 июня 2020

Сначала я бы обернул ввод в форму. После этого вы можете использовать функцию setCustomValidity для поля ввода, чтобы установить собственное сообщение, если условие истинно. Когда вы нажмете Enter или отправите форму, вы увидите сообщение об ошибке. Таким образом, вы можете предоставить любое собственное сообщение для ввода. Обратите внимание на блок else для обработки случаев отсутствия ошибок.

Ссылка: 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>
0 голосов
/ 21 июня 2020

Используйте HTML5 Pattern Match, ниже я использовал образец ([a-zA-Z0-9] +), который просто означает символы только латинского алфавита и цифры 0-9. Вы можете включить пробел с помощью ([a-zA-Z0-9] + \ s {1} [a-zA-Z0-9] +)

Подробнее о регулярном выражении можно узнать здесь.

Это не помешает автору вводить неправильные нажатия клавиш, это только подтвердит ввод. Я включу другой подход, чтобы показать пользовательскую ошибку. 

<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>

Второй подход. Используйте Javascript и запишите ошибку в тег div. 

<!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>
...