Почему не работает required input

Поскольку атрибут required не работает, пользователи могут постоянно отправлять пустые формы, и они будут храниться в моей базе данных SQL

У меня нет в форме, так как это мешает мне использовать windows.location .

Я новичок в программировании, кто-то может дать несколько советов (с объяснениями), что делать, чтобы это исправить? Любая помощь будет оценена! Большое спасибо! (Я использую ванильный JavaScript для этого)

4 ответа

Атрибут required не работает, потому что ваша форма не отправлена. Вам нужно указать кнопку с type=»submit» или для отправки вашего form .

Я предлагаю вам переместить функцию signUp внутри тега form следующим образом: onsubmit :

Затем добавьте эту функцию Javascript:

требуется Атрибут работает, если он определяет, имеет ли элемент, которому он назначен, длину значения больше нуля, если это утверждение ложно (имеется в виду длину значения ноль), то при отправке формы он фокусирует этот элемент как «обязательный» для выполнения. ,

Вот пример с JavaScript и как проверка полей ввода может работать внутри него.

Основы проверки HTML5. У вас есть это по нажатию кнопки, и она запускается до проверки. Это показывает, что onclick работает, а onsubmit — нет. Используйте правильное событие.

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

Использование атрибута required не сделает ничего очевидного в вашем коде, поскольку имеет вызов onclick=signUp() , который сработает перед проверкой браузера. С вашим текущим кодом значения формы (присутствующие или нет) будут по-прежнему отправляться в /users , поскольку эти значения не проверяются.

Источник

html required не работает

Логический атрибут required HTML сообщает браузеру о возможности отправки данных формы только при заполнении обязательных полей. Это значит, что поле нельзя оставить пустым, и что в зависимости от других атрибутов или типов полей приниматься могут только конкретные типы значений. Чуть позже мы поговорим о том, как сообщать браузерам о необходимости отправки определенные типы данных.

Если обязательные поля остаются пустыми, форма не будет отправлена. Opera , Firefox , Internet Explorer 10+ и Chrome выдают пользователю сообщение об ошибке. Например, « Заполните это поле » или « Нужно заполнить пустые поля ».

В терминологии Javascript событие focus запускает элемент формы, когда на нее переключается фокус, когда фокус переходит на другой элемент или она теряет фокус.

В CSS можно использовать псевдокласс :focus для стилизации элементов, которые выделены в данный момент.

Атрибут required применим для любого типа элемента ввода, за исключением button , submit , image , color и hidden . У всех этих элементов имеется значение по умолчанию, поэтому дополнительный атрибут будет лишним. Синтаксис данного атрибута просто required или required=»required» , если вы используете XHTML-синтаксис .

Добавим атрибут HTML input required к форме регистрации. Сделаем поля имени, адреса электронной почты, пароля и даты подписки обязательными:

На скриншотах, приведенных ниже, можно видеть, что делает атрибут required HTML при попытке подтвердить форму:

Сообщение об обязательных полях в Firefox

Та же ситуация в Opera…

и в Google Chrome

Стилизация обязательных полей в форме

Вы можете стилизовать обязательные поля в формах при помощи псевдокласса :required,:optional или отрицательного псевдокласса :not(:required)) . Также можно стилизовать валидные и не валидные поля с помощью псевдоклассов :valid и :invalid . При помощи этих псевдоклассов HTML input required можно показывать пользователям, какие поля обязательны к заполнению:

В данном случае мы добавляем фоновое изображение ( звёздочку ) к обязательным полям формы. В input-элементы нельзя включать генерируемый контент. Поэтому лучше будет использовать фоновое изображение. Кроме этого валидные и не валидные поля можно выделить разными фоновыми картинками. Изменения будут заметны, только если пользователь выделил соответствующий элемент формы.

Предупреждение : Firefox стилизует не валидные элементы

Учтите, что браузер Firefox применяет к не валидным элементам собственную стилизацию ( красную тень ), как было показано на одной из картинок выше. Чтобы отключить этот эффект для required HTML , воспользуйтесь следующим CSS-кодом :

Подсказка : таргетированная стилизация для устаревших браузеров

Устаревшие браузеры вроде IE8 и IE9 не поддерживают псевдокласс :required , но можно предоставить таргетированные стили при помощи селектора атрибутов:

Также можно использовать этот атрибут в качестве хука для валидации формы в браузерах, не поддерживающих валидацию на основе HTML5 . Javascript-код проверит пустые элементы ввода на наличие атрибута required и не отправит форму при обнаружении пустых обязательных полей.

Данная публикация представляет собой перевод статьи « HTML5 Form Attributes (Part 1) » , подготовленной дружной командой проекта Интернет-технологии.ру

О наболевшем, о Internet Explorer

Дак, как же заставить работать required в старых версиях IE?

За все у нас будет отвечать функция fnCheckFields(). Поместите на вашем сайте JS-код:

Окно ввода, где должен вводиться обязательный параметр, на html-языке должно выглядеть так:

Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. На рис. 1 показано сообщение в разных браузерах.

Источник

Почему не работает required input

Итак, вы создали на своем сайте форму обратной связи, чтобы посетители могли отправлять вам сообщения. Также вы добавили в неё атрибут required – чтобы эти же посетители не могли отправлять незаполненную форму с пустым полями. Время шло, и вы, согласно новым веяниям, сделали отправку вашей формы без перезагрузки страницы, с помощью ajax и обработки события onclick. И вдруг заметили, что required перестал работать. В чем же дело?

Дело в том, что форму вы сейчас отправляете не с помощью HTML, а с помощью JS, поэтому не происходит вызова метода submit(), в котором, собственно говоря, и проверяется корректность заполнения полей формы. При отправке с помощью JS, действия по проверке формы пропускаются, поэтому их нужно реализовывать самостоятельно на JS – с помощью checkValidity(). Рассмотрим конкретный пример.

Скрипт по отправке формы и проверяющий заполнение полей (замена required):

Вот так можно заменить required на JS. Я привел сразу же пример отправки данных ajax-ом в файл saveser.php, если же у вас реализована своя функция, то замените её на вот эту строку:

Также стоит отметить, что если полей в форме несколько (а так оно обычно и есть), то можно реализовать проверку отдельных полей. Можно также выводить сообщение не встроенным алертом, а придумать свое окно – возможностей масса. Если вам требуется реализовать что-то подобное на своем сайте, то вы всегда можете обратиться к мне – up777up@yandex.ru – за небольшую плату вам будет оказана быстрая помощь по любым проблемам с сайтом.

Автор этого материала — я — Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML — то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

заметки, javascript, валидация, html, скрипты для сайта

Источник

Почему `readonly`,` disabled` и `required` в одном и том же поле ввода текста не работают должным образом?

Я использую свойства readonly , disabled и required поля ввода текста, например:

Моя проблема в том, что два из трех свойств, т. Е. disabled и readonly работают правильно, но required не работает. Кнопка Отправить позволяет отправить, даже если она пуста. Но если я удаляю readonly , форма не может быть отправлена пустой.

только для чтения, потому что я использую средство выбора даты, и пользователю не разрешено вводить дату вручную.

отключено, потому что я хочу отключить это поле ввода в начале

Требуется, потому что использование должно выбрать дату из палитры, чтобы дата не была пустой.

2 ответа

На самом деле происходит то, что по умолчанию (реализация проверок HTML) проверка в HTML не будет запускаться, если поле доступно только для чтения или отключено.

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

Кажется, что нет прямого и этического решения этого, но косвенное решение может быть:

I) Обработка событий нажатия клавиш вверх / вниз, чтобы ввод не мог быть добавлен.

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

Кроме того, вы можете использовать события включения и отключения jQuery, если вы используете указатели даты jQuery UI, как показано ниже:

Для дальнейшего чтения вы можете посмотреть эту ссылку. Это обсуждение валидации Bootstrap, но оно относится и к чистому HTML.

Надеюсь, это поможет.

Если элемент disabled , он игнорируется при проверке формы.

Из спецификации WHATWG для HTML:

Если элемент отключен, ему запрещается проверка ограничений. (источник)

Вы почти наверняка не хотите disabled здесь: вам нужно поведение readonly . Из раздела, документирующего этот атрибут:

Разница между disabled и readonly заключается в том, что элементы управления, доступные только для чтения, все еще могут функционировать, в то время как отключенные элементы управления обычно не функционируют как элементы управления, пока они не включены. (источник)

«По-прежнему работает» включает проверку, а также такие вещи, как значение, являющееся частью данных, отправляемых при отправке формы.

Источник

Почему не работает required input

Как заставить работать атрибут required для input в старых версиях IE?

О наболевшем, о Internet Explorer

Дак, как же заставить работать required в старых версиях IE?

Комментарии

Почему не работает required input

4 ответа

html required не работает

Стилизация обязательных полей в форме

О наболевшем, о Internet Explorer

Дак, как же заставить работать required в старых версиях IE?

Почему не работает required input

Почему `readonly`,` disabled` и `required` в одном и том же поле ввода текста не работают должным образом?

2 ответа