How to check if an input is empty with JavaScript
Last week, I shared how to check if an input is empty with CSS. Today, let’s talk about the same thing, but with JavaScript.
It’s much simpler.
Here’s what we’re building:
Events to validate the input
If you want to validate the input when a user types into the field, you can use the input event.
If you want to validate the input when a user submits a form, you can use the submit event. Make sure you prevent the default behavior with preventDefault .
If you don’t prevent the default behavior, browsers will navigate the user to the URL stated in the action attribute.
Validating the input
We want to know whether an input is empty. For our purpose, empty means:
- The user hasn’t typed anything into the field
- The user has typed one or more empty spaces, but not other characters
In JavaScript, the pass/fail conditions can be represented as:
Checking this is easy. We just need to use the trim method. trim removes any whitespace from the front and back of a string.
If the input is valid, you can set data-state to valid . If the input is invalid, you can set the data-state to invalid .
When a user enters text into the field, input validation begins. However, if the user removes all text from the field, the input continues to be invalid.
We don’t want to invalidate the input if the user removes all text. They may need a moment to think, but the invalidated state sets off an unnecessary alarm.
To fix this, we can check whether the user has entered any text into the input before we trim it.
Here’s a Codepen for you to play with:
Thanks for reading. Did this article help you out? If it did, I hope you consider sharing it. You might help someone else out. Thanks so much!
This article was originally posted at my blog.
Sign up for my newsletter if you want more articles to help you become a better frontend developer.
Курсы javascript
А что у вас не так? ‘Заполните все поля’ — то есть поле не одно будет и не знаете как проверить все?
Если вы передаете в функцию ссылку на форму, то зачем document.getElementById("empt")? Ну так используйте переданное — if (form.empt.value == »).
PS. Если речь о проверке на пустоту, то и только пробел/пробелы, это собственно "пусто", и проверка на » не даст желаемого.
Решил следующим образом:
Одна проблема- можно отключить. Надо решить. Или сделать на стороне сервера. Только не знаю как
Не верное решение:
null тут вообще не при делах.
Если строка действительно пуста, то достаточно проверки на ». Но если строка это одни пробелы? То есть перед проверкой нужно удалить крайние пробелы:
для новых браузеров можно воспользоваться методом .trim(), но нужно учитывать и не столь древние браузеры, которыми еще пользуются, значит рег. выражения:
Считайте так — проверка на стороне клиента, это сервис для него, а проверка на стороне сервера, это ваша святая обязанность.
JavaScript validation for empty input field
I have this input field <input name="question"/> I want to call IsEmpty function when submit clicking submit button.
I tried the code below but did not work. any advice?
15 Answers 15
An input field can have whitespaces, we want to prevent that.
Use String.prototype.trim():
See the working example here
You are missing the required <form> element. Here is how your code should be like:
I would like to add required attribute in case user disabled javascript:
It works on all modern browsers.
Add an id «question» to your input element and then try this:
The reason your current code doesn’t work is because you don’t have a FORM tag in there. Also, lookup using «name» is not recommended as its deprecated.
Как проверить, пуст ли ввод с помощью JavaScript
На прошлой неделе я поделился, как проверить, пуст ли ввод с помощью CSS. Сегодня поговорим о том же, но с JavaScript.
Все намного проще.
Вот что мы создаем:
События для проверки ввода
Если вы хотите проверить ввод, когда пользователь вводит в поле, вы можете использовать событие input .
Если вы хотите проверить ввод, когда пользователь отправляет форму, вы можете использовать событие submit . Убедитесь, что вы запретили поведение по умолчанию with preventDefault .
Если вы не запретите поведение по умолчанию, браузеры будут перенаправлять пользователя по URL-адресу, указанному в атрибуте действия.
Проверка ввода
Мы хотим знать, пуст ли вход. Для наших целей пустой означает:
- Пользователь ничего не ввел в поле
- Пользователь ввел одно или несколько пустых пробелов, но не другие символы.
В JavaScript условия прохождения / отказа могут быть представлены как:
Проверить это легко. Нам просто нужно использовать метод trim . trim удаляет все пробелы с начала и с конца строки.
Если ввод действителен, вы можете установить data-state в valid . Если ввод неверен, вы можете установить data-state на invalid .
Когда пользователь вводит текст в поле, начинается проверка ввода. Однако, если пользователь удаляет весь текст из поля, введенные данные остаются недействительными.
Мы не хотим аннулировать ввод, если пользователь удаляет весь текст. Им может потребоваться время, чтобы подумать, но недействительное состояние вызывает ненужную тревогу.
Чтобы исправить это, мы можем проверить, ввел ли пользователь какой-либо текст во ввод, прежде чем мы trim это.
Вот вам Codepen, с которым можно поиграть:
Спасибо за прочтение. Эта статья вам помогла? Если это так, я надеюсь, вы подумаете о том, чтобы поделиться им. Вы могли бы помочь кому-то другому. Огромное спасибо!
Эта статья изначально была размещена в моем блоге.
Подпишитесь на мою информационную рассылку, если хотите, чтобы больше статей помогли вам стать лучшим разработчиком внешнего интерфейса.