Отключить проверку элементов формы 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 теперь включает текст-заполнитель в строке расположения, которая читает "поиск закладок и истории":

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

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

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

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

У вас также есть возможность переопределить шаблон по умолчанию с атрибутом шаблон="протокол 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 одним щелчком мыши на значке расширения на панели инструментов