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

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

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

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

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

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

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

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

Я прочитал спецификацию и провел некоторое тестирование в 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>

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

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

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

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

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

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

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

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

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

Текст заполнителя

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

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

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

По иронии судьбы Firefox 3.5 не поддерживает добавление текста-заполнителя в ваши собственные веб-формы. Такова жизнь.

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

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атрибут, будут просто игнорировать его. Нет вреда, нет фола. Посмотрите, поддерживает ли ваш браузер заполнитель текста .

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

Я нашел решение для 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

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

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

Ура !!!

Вот функция, которую я использую, чтобы 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;
});

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

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

Если пометить элемент формы как required=""то novalidate=""не поможет.

Способ обойти requiredпроверку - отключить элемент .

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

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