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

Question

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

<input type="text" id="visitDate" name="visitdate" readonly="readonly" disabled="disabled" required="required" /> 

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

Я использую

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

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

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

Answer 1

Что действительно происходит, так это то, что по умолчанию (HTML Implementation of Validations) проверка в HTML не срабатывает, если поле доступно только для чтения или отключено.

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

Похоже, что нет прямого и этическое решения этой проблемы, но косвенное решения может быть:

я) Handeling ключа вверх/вниз ключа события, так что вход не может быть добавлен.

JQuery Код:

$('input').keypress(function(e) { 
    e.preventDefault(); 
}); 

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

Кроме того, вы можете использовать Включение и отключение событий JQuery, если вы используете Datepickers JQuery UI, как показано ниже:

$("#txtSearch").datepicker("enable"); 
$("#txtSearch").datepicker("disable"); 

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

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

Answer 2

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

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

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

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

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

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