Проблемы и решения, возникающие при использовании обязательного ввода в html5

Ошибка сокрытия ввода при отправке формы.

При отправке формы некоторые входные теги скрыты, и во время процесса проверки формы появится ошибка An invalid form control with name='' is not focusable .

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

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

Эта ошибка также возникнет, если входные данные содержат атрибуты display:none иобязательные.

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

1. При скрытии удалить необходимый атрибут

 selector.removeAttribute(обязательно)

2. Если параметр «Требуется» не используется, это может быть вызвано тем, что тип кнопки не установлен. Установить <button type=button>

3. Форма не проверяется, то есть добавляется атрибут novalidate. (Не окончательное решение ）<form novalidate></form>

4. Поскольку это вызвано использованием display:none, та же видимость: скрытый также вызовет проблемы, поэтому не используйте ее. Вы можете установить непрозрачность стиля CSS: 0;

5. Отключите этот элемент управления формой. отключено. Это связано с тем, что обычно, если вы скрываете элемент управления формой, это происходит потому, что его значение вас не волнует. Таким образом, эта пара значений имени и значения элемента управления формой не будет отправлена ​​при отправке формы.

 $(body).on(submit, .myForm, function(evt) {// Отключите то, что мы не хотим проверять.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled , true);// Если доступна проверка HTML5, позвольте ей запуститься. В противном случае запретите default.if (this.el.checkValidity && !this.el.checkValidity()) { // Повторно включите то, что мы ранее отключили. $([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false); return true;}evt.preventDefault();// Повторно включите то, что отключено. мы ранее отключили.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false);// Сюда идут любые другие элементы обработки формы.});

Выше приведены проблемы и решения, возникающие при использовании обязательного ввода h5, введенного редактором. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. . Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!