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

Я прочитал спецификацию и провел некоторое тестирование в 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, которые связаны с псевдо-классами. Если кто-нибудь найдет другое решение, Пожалуйста, позвольте мне знать.

вместо того, чтобы пытаться завершить проверку браузера, вы можете поставить 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>

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

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

лучшее решение-использовать текстовый ввод и добавить атрибут 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.)) * $" чтобы не ставить префикс, потому что я думаю, что лучше быть более разрешительным)

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

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

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