Можно ли настроить обязательное поле для игнорирования пробелов?

Обязательный атрибут в HTML5 очень удобен:

<input type="text" required>

Но он по-прежнему позволяет пользователям вводить только пустое пространство. Есть ли HTML-решение для этого?

Источник

2 ответа

Решение

Попробуйте pattern атрибут Вам понадобится регулярное выражение, которое указывает "хотя бы один символ".

Источник

Использовать pattern атрибут в сочетании с required приписывать. И обязательно включите title атрибут, так как большинство браузеров вставляют текст заголовка во всплывающее окно проверки.

<input required pattern=".*\S+.*" title="This field is required">

.*\S+.* Для шаблона требуется, по крайней мере, один непробельный символ, но также допускаются символы пробела (пробелы, символы табуляции, возврат каретки и т. д.) в начале или конце. Если вы не хотите, чтобы пользователь мог ставить пробелы в начале / конце, используйте вместо этого:

<input required pattern="\S+" title="This field is required">
Источник

Вы, наверное, захотите этого:

<input type="text" required pattern="\S(.*\S)?">

(По крайней мере, один непробельный символ и без пробелов в начале или в конце ввода)

Или, если пробелы в начале и в конце допустимы, тогда это:

<input type="text" required pattern=".*\S.*">
Источник

шаг 1

создать функцию Javascript:

function ignoreSpaces(event) {
  var character = event ? event.which : window.event.keyCode;
    if (character == 32) return false;
}

Шаг 2

используйте его в любом поле ввода текста в HTML.

<input type="text" id="userInput" onkeypress="return ignoreSpaces(event)">

Рабочий пример:

index.html

<html> 
<body>
  <input type="text" onkeypress="return ignoreSpaces(event)">
  
  <script>
    function ignoreSpaces(event) {
        var character = event ? event.which : window.event.keyCode;
        if (character == 32) return false;
    }
  </script>

</body>
</html>

Источник
Другие вопросы по тегам