Отключить проверку элементов формы HTML5

Question

В моих формах я хотел бы использовать новые типы форм HTML5, например <input type="url" /> (, подробнее о типах здесь ).

Проблема в том, что Chrome хочет быть очень полезным и проверять эти элементы для меня, за исключением того, что он отстой. Если он не проходит встроенную проверку, там нет сообщения или указания, кроме элемента, получающего фокус. Я предварительно заполняю элементы URL "http://", и поэтому моя собственная пользовательская проверка обрабатывает эти значения как пустые строки, однако Chrome отклоняет это. Если бы я мог изменить правила валидации, это тоже сработало бы.

Я знаю, что мог бы просто вернуться к использованию type="text", но я хочу приятные улучшения, используя предложения этих новых типов (например: он автоматически переключается на пользовательскую раскладку клавиатуры на мобильных устройствах):

Итак, есть ли способ отключить или настроить автоматическую проверку?

Answer 1

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

<form method="post" action="/foo" novalidate>...</form>

См. https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

Answer 2

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

Я использую jquery с этим HTML.

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

Я не проверял это ни в одном другом браузере.

Answer 3

Я просто хотел добавить, что использование атрибута novalidate в вашей форме только предотвратит отправку формы браузером.Браузер по-прежнему оценивает данные и добавляет псевдоклассы: valid и: invalid.

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

Answer 4

Вместо того, чтобы пытаться завершить проверку браузера, вы можете поместить http:// в качестве заполнителя текста. Это с той самой страницы, на которую вы ссылались:

Заполнитель текста

Первое улучшение, которое HTML5 вносит в веб-формы, - это возможность установить заполнитель текста в поле ввода . Текст заполнителя отображается внутри поля ввода, пока поле пустое и не сфокусировано. Как только вы щелкаете (или вкладку) в поле ввода, текст-заполнитель исчезает.

Возможно, вы уже видели текст заполнителя раньше. Например, Mozilla Firefox 3.5 теперь включает в строку адреса текст заполнителя, который гласит «Поиск по закладкам и истории»:

Когда вы щелкаете (или вкладку) на панели местоположения, текст заполнителя исчезает:

Как ни странно, Firefox 3.5 не поддерживает добавление текста-заполнителя в ваши собственные веб-формы. C’est la vie.

Поддержка заполнителей

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

Вот как вы можете включить заполнитель текста в свои собственные веб-формы:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

Браузеры, которые не поддерживают атрибут placeholder, просто проигнорируют его. Нет вреда, нет фола. Проверьте, поддерживает ли ваш браузер заполнитель текста .

Это будет не совсем то же самое, поскольку он не обеспечит эту «отправную точку» для пользователя, но, по крайней мере, на полпути.

Answer 5

Лучшее решение - использовать текстовый ввод и добавить атрибут inputmode = "url", чтобы обеспечить возможности клавиатуры URL. Спецификация HTML5 была задумана для этой цели. Если вы сохраните type = "url", вы получите проверку синтаксиса, которая бесполезна в каждом случае (лучше проверить, возвращает ли она ошибку 404, а не синтаксис, который является вполне допустимым и не очень помогает).

У вас также есть возможность переопределить шаблон по умолчанию с атрибутом pattern = "https?: //.+", например, чтобы сделать его более разрешающим.

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

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

В моем случае я помещаю элемент select с 2 вариантами (http: // или https://) перед вводом URL, потому что мне нужны только веб-сайты (а не ftp: // или другие вещи). Таким образом, я избегаю ввода этот странный префикс (самое большое сожаление по поводу Тима Бернерса-Ли и, возможно, основного источника синтаксических ошибок URL), и я использую простой текстовый ввод с inputmode = "url" с заполнителями (без HTTP). Я использую jQuery и сценарий на стороне сервера для проверить реальное существование веб-сайта (№ 404) и удалить префикс HTTP, если он вставлен (я избегаю использовать шаблон, такой как pattern = "^ ((? http).) * $", чтобы предотвратить установку префикса, потому что я думаю, лучше быть более терпимым)

Answer 6

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

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

Таким образом, вы также можете настроить свое сообщение ...

Я получаю решение на этой странице: http://trac.webkit.org/wiki/Styling%20Form%20Controls

Answer 7

Просто используйте novalidate в вашей форме.

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

Приветствия !!!

Answer 8

Вы можете установить простое расширение Chrome и просто отключить проверку на лету https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

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

Answer 9

Вот функция, которую я использую, чтобы Chrome и Opera не отображали некорректный диалог ввода даже при использовании novalidate.

window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});