Проверка пустых полей html

Содержание

Проверка пустых полей формы: универсальный способ
Проверка пустых полей формы: универсальный способ
JavaScript validation for empty input field
15 Answers 15
See the working example here
Простая валидация формы без JS
HTML5
CSS3
Итог

Проверка пустых полей формы: универсальный способ

Те, кто занимается созданием сайтов, в какой-то момент сталкиваются с необходимостью проверки заполнения пользователем полей формы, размещённой на сайте. Для этого создаётся какой-то вариант проверки пустых полей, который используется в своих проектах. Но для каждого случая количество полей, которые необходимо проверить, может быть разным. Это приводит к тому, что созданный вариант проверки необходимо изменять в зависимости от конкретных условий, и в дальнейшем у нас появляется уже несколько его модификаций.

Кроме того, на одной странице сайта может размещаться несколько форм, у каждой из которых будет разное количество обязательных для заполнения полей. В результате код будет включать в себя несколько блоков с одинаковыми функциями, но разными условиями, что не всегда является правильным решением.

В своей практике мне тоже приходилось использовать разные варианты проверки заполнения полей формы в зависимости от конкретных условий. И в файле *.js присутствовало несколько функций для проверки разных форм, что увеличивало объём кода и ухудшало его восприятие.

В какой-то момент было принято решение написать вариант универсального способа проверки пустых полей, который можно будет использовать для любой формы с любым количеством обязательных полей. Необходимыми условиями такого способа были определены простота и отсутствие громоздких конструкций. В результате был найден способ, который полностью меня устроил и простотой, и универсальностью.

В html-разметке для обязательных полей добавляется data-атрибут, который является маркером обязательности.
Проверка выполняется только для тех полей, у которых присутствует данный атрибут.
Возможность расширения функционала проверкой значения, указанного пользователем в поле.

  Заголовок формы #1
  Обязательно для заполнения 
  Обязательно для заполнения

Пример кода проверки полей:

$('.js-form-validate').submit(function () < var form = $(this); var field = []; form.find('input[data-validate]').each(function () < field.push('input[data-validate]'); var value = $(this).val(), line = $(this).closest('.some-form__line'); for(var i=0;i.bind(this),2000); event.preventDefault(); > > >); >);

Пример реализации для двух форм на странице:

Источник

Проверка пустых полей формы: универсальный способ

В html-разметке для обязательных полей добавляется data-атрибут, который является маркером обязательности.
Проверка выполняется только для тех полей, у которых присутствует данный атрибут.
Возможность расширения функционала проверкой значения, указанного пользователем в поле.

  Заголовок формы #1
  Обязательно для заполнения 
  Обязательно для заполнения

Пример кода проверки полей:

$('.js-form-validate').submit(function () < var form = $(this); var field = []; form.find('input[data-validate]').each(function () < field.push('input[data-validate]'); var value = $(this).val(), line = $(this).closest('.some-form__line'); for(var i=0;i.bind(this),2000); event.preventDefault(); > > >); >);

Пример реализации для двух форм на странице:

Источник

JavaScript validation for empty input field

You accepted an invalid answer. Checking for null is odd since an input (or textarea) returns always a String. Also, you should not use inline JavaScript. Also you should not use blindly return false . etc etc

15 Answers 15

‘onsubmit=»return validate()»‘ needs to be changed. validate is not the name of the function. It should be ‘onsubmit=»return validateForm()»‘

This accepted is actually invalid. The commas in the if statement will cause only the last check to be returned: stackoverflow.com/a/5348007/713874

@icc97 I believe those should be || and not && . Otherwise all the fields have to be empty -at once- before the alert will appear.

An input field can have whitespaces, we want to prevent that.
Use String.prototype.trim():

const isEmpty = str => !str.trim().length; document.getElementById("name").addEventListener("input", function() < if( isEmpty(this.value) ) < console.log( "NAME is invalid (Empty)" ) >else < console.log( `NAME value is: $` ); > >);

See the working example here

You are missing the required element. Here is how your code should be like:

function IsEmpty() < if (document.forms['frm'].question.value === "") < alert("empty"); return false; >return true; >

I would like to add required attribute in case user disabled javascript:

It works on all modern browsers.

if(document.getElementById("question").value.length == 0)

Add an id «question» to your input element and then try this:

 if( document.getElementById('question').value === '' )

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.

You can loop through each input after submiting and check if it’s empty

let form = document.getElementById('yourform'); form.addEventListener("submit", function(e) < // event into anonymous function let ver = true; e.preventDefault(); //Prevent submit event from refreshing the page e.target.forEach(input => < // input is just a variable name, e.target is the form element if(input.length < 1)< // here you're looping through each input of the form and checking its length ver = false; >>); if(!ver)< return false; >else < //continue what you were doing :) >>)

Hi, when you are providing a solution, it would be great to provide a reason why your solution fix the problem which might help the future readers.

if(document.getElementById("question").value == "")

sorry, I thought there was an ID, document.getElementsByName(«question»)[0].value, or just add an ID to the element

Just add an ID tag to the input element. ie:

and check the value of the element in you javascript:

Oh ya, get get firefox/firebug. It’s the only way to do javascript.

Customizing the input message using HTML validation when clicking on Javascript button

function msgAlert() < const nameUser = document.querySelector('#nameUser'); const passUser = document.querySelector('#passUser'); if (nameUser.value === '')< console.log('Input name empty!'); nameUser.setCustomValidity('Insert a name!'); >else < nameUser.setCustomValidity(''); console.log('Input name ' + nameUser.value); >> const v = document.querySelector('.btn-petroleo'); v.addEventListener('click', msgAlert, false);

.container .w-auto < width: auto!important; >.p-3 < padding: 1rem!important; >.align-items-center < -ms-flex-align: center!important; align-items: center!important; >.form-row < display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; >.mb-2, .my-2 < margin-bottom: .5rem!important; >.d-flex < display: -ms-flexbox!important; display: flex!important; >.d-inline-block < display: inline-block!important; >.col < -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; >.mr-sm-2, .mx-sm-2 < margin-right: .5rem!important; >label < font-family: "Oswald", sans-serif; font-size: 12px; color: #007081; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; >label < display: inline-block; margin-bottom: .5rem; >.x-input < background-color: #eaf3f8; font-family: "Montserrat", sans-serif; font-size: 14px; >.login-input < border: none !important; width: 100%; >.p-4 < padding: 1.5rem!important; >.form-control < display: block; width: 100%; height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; >button, input < overflow: visible; margin: 0; >.form-row < display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; >.form-row>.col, .form-row>[class*=col-] < padding-right: 5px; padding-left: 5px; >.col-lg-12 < -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; >.mt-1, .my-1 < margin-top: .25rem!important; >.mt-2, .my-2 < margin-top: .5rem!important; >.mb-2, .my-2 < margin-bottom: .5rem!important; >.btn:not(:disabled):not(.disabled) < cursor: pointer; >.btn-petroleo < background-color: #007081; color: white; font-family: "Oswald", sans-serif; font-size: 12px; text-transform: uppercase; padding: 8px 30px; letter-spacing: 2px; >.btn-xg < padding: 20px 100px; width: 100%; display: block; >.btn < display: inline-block; font-weight: 400; color: #212529; text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; >input

Источник

Простая валидация формы без JS

В данной статье я бы хотел поделиться методом быстрой валидации полей с помощью разметки и стилей. Данный метод не является кроссбраузерным и рекомендуется к использованию только как дополнительная фича. По ходу статьи мы будем уменьшать наши шансы на кроссбраузерность, но повышать функциональность.

Давайте попробуем собрать стандартную форму, которая будет включать в себя: Имя, E-Mail, Телефон, Ссылку на сайт и допустим Ваш рост, чтобы поэксперементировать с числовым полем.

HTML5

Сейчас уже никого не удивить атрибутами валидации input полей, которое принес нам стандарт HTML5. Однако, обходить стороной мы его не станем — этот метод валидации является наиболее поддерживаемым в современных браузерах.

Самый простой путь валидации — это определить тип input поля и расставить атрибуты required которые отвечают за обязательность заполнения.

Применение этих двух атрибутов позволит гораздо эффективнее валидировать вводимую информацию нативными методами. Ну и конечно же поддержка этих свойств браузерами наиболее широка.

Отдельно хотелось бы сказать про тип поля tel. Ожидается что браузер будет валидировать телефонные номера, но нет, поле с типом tel используется сейчас только для автозаполнения. Дело в том, что валидация телефонных номеров очень неоднозначная задача из-за слишком большого количества различных форматов телефонных номеров в разных странах, которые просто никак не получится унифицировать и записать в одно правило.

Однако, нам на помощь приходит атрибут pattern. Этот атрибут принимает в себя значение регулярного выражения. В нашем случае рассмотрим вариант паттерна для ввода мобильного телефона в РФ: +7 (123) 456-78-91. Для этого добавим простое регулярное выражение в наше поле с телефоном, а также ограничим минимальное и максимальное количество символов:

\s[\(]\d[\)]\s\d[\-]\d[\-]\d" minlength="18" maxlength="18" />

Обычно я использую данный паттерн в связке с маской для ввода номера, но тут к сожалению без JS пока что не обойтись. Если вы не используете маску, то я бы не стал использовать паттерны на вводе телефона, поскольку это в большинстве случаев вызовет больше неудобств для пользователя.

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

Стоит также учитывать, что атрибут minlength до сих пор не поддерживается в браузерах IE, EDGE и только с версии 10.3 появился в iOS. Однако maxlength поддерживается везде и очень давно. Нам в целом хватит и этого.

Давайте также поставим ограничение для поля с ростом. Допустим мы предполагаем, что пользователь нашего сайта определенно не может быть ниже 100 см и выше 250 см. Так и напишем:

С поддержкой этих атрибутов в браузерах, все хорошо.

CSS3

Для того чтобы кастомно стилизовать нашу валидацию, воспользуемся псевдоклассами :invalid и :valid. Поддержка этих псевдоклассов в браузерах позволяет использовать их максимально широко на данный момент.

Казалось бы, берем полученные знания и применяем! Но не все так просто как кажется, давайте проверим как это работает. В результате мы получим, что все наши поля изначально пустые и обязательные будут считаться не валидными, а все остальные валидными. Совсем не красиво и непонятно для пользователя, что от него хотят.

Мы можем пойти на небольшую хитрость и использовать псевдокласс :placeholder-shown. С помощью этого псевдокласса мы можем определить отображается ли сейчас значение placeholder в нашем поле ввода. Атрибут placeholder отображается только тогда, когда в наше поле ничего не введено. Соответственно, чтобы применить этот псевдокласс нам просто нужно обратить его свойство с помощью :not. В итоге получаем вот такую конструкцию:

input:invalid:not(:placeholder-shown) input:valid:not(:placeholder-shown)

Если прочитать дословно: окрасить красным цветом границу инпута, когда наше поле не валидно и когда в нем не отображается значение атрибута placeholder. Если ваше поле не имеет атрибута placeholder, можно просто поставить внутри пробел:

У данного метода есть только один минус: поддержка. Псевдоэлемент :placeholder-shown поддерживается во всех браузерах кроме IE и EDGE. К счастью :not не обладает таким недостатком.

Для примера я набросал все вышесказанное в CodePen и добавил еще немного возможностей:

Итог

Таким образом, не прибегая к JS мы с помощью двух строк в CSS смогли стилизовать и валидировать форму. На текущий момент такая конструкция будет хорошо работать в большинстве браузеров, к сожалению, как всегда, веб-разработку подводят детища Microsoft.

Источник