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

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

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

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

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

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

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

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

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

Как ни странно, Firefox 3.5 не поддерживает добавление текста-заполнителя в собственные веб-формы. Cest 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" для предоставления возможностей клавиатуры. Для этой цели была разработана спецификация HTML5. Если вы сохраните type = "url" , вы получите проверку синтаксиса, которая не полезна в каждом случае (лучше проверить, возвращает ли она ошибку 404 вместо синтаксиса, который является довольно разрешительным и не очень помогает).

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

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

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

В моем случае я помещаю элемент select с двумя параметрами (http://или https://) до ввода URL-адреса, потому что мне нужны только сайты (и нет ftp://или другие вещи). Таким образом, я избегаю вводить этот странный префикс (самое большое сожаление Тима Бернерса-Ли и, возможно, главный источник ошибок синтаксиса URL-адреса), и я использую простой текстовый ввод с inputmode = "url" с заполнителями (без HTTP). Я использую jQuery и серверную сторону script для проверки реального существования веб-сайта (нет 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 и просто отключить проверку на лету https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

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

Вот функция, которую я использую, чтобы хром и опера не отображали неверный диалог ввода даже при использовании 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;
});