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

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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

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

Ответ 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

Ответ 7

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

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

Ура!!!

Ответ 8

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

Ответ 9

Вы можете добавить немного 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);

Ответ 10

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

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