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

419

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

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

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

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

nickf
источник
8
В проекте спецификации HTML 5.1 упоминается inputmodeатрибут , который - если я правильно понимаю, что я прочитал - может использоваться для указания того, какой тип клавиатуры следует предлагать пользователю, когда он взаимодействует с полем, без каких-либо правил валидации. В какой-то момент в будущем использование inputmodeатрибута вместо typeатрибута, вероятно, будет правильным решением этой проблемы, но пока нет.
Марк Амери
@MarkAmery Хотя это не было бы слишком сложно, чтобы получить будущее сейчас:$('[inputmode]').each(function () { this.attr({type: this.attr('inputmode'), novalidate: true}) });
Marnen Laibow-Koser
1
@ MarnenLaibow-Koser Хотя то, что вы описали, работает, если все, что вы хотите сделать, это отключить проверку (как указано в вопроснике), она не вполне достигает того же результата, что и была inputmodeбы. Делая все по-своему, вы все еще не можете (например) прочитать нечисловые значения, которые пользователь вводит в поле ввода типа number. Например, попробуйте ввести что-нибудь нечисловое в текстовое поле этой скрипки и нажать кнопку.
Марк Амери
@MarkAmery Интересно. Это потому, что <input type='number'>вообще не принимает нечисловые значения?
Марнен Лайбоу-Козер
@ MarnenLaibow-Koser Я так думаю. Принятый ответ на этот вопрос о проблеме включает ссылку на спецификацию, которая, как утверждает ответчик, требует такого поведения.
Марк Амери

Ответы:

752

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

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

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

Якоб С
источник
83
novalidate="novalidate"и novalidate=""правильный синтаксис тоже.
Бассим
9
@bassim Правильный синтаксис, но слишком многословный - зачем печатать больше, чем нужно?
user1569050
11
@ user1569050 Например, в таких средах, как CakePHP, он будет использовать novalidate="novalidate"метод при установке novalidate => trueв $optionsмассиве FormHelper::create(). Спасибо Бассим за дополнительную информацию :)
Jelmer
12
@ rybo111 Это проверка на стороне клиента, которая полезна для уменьшения количества запросов к серверу. Это не оправдание для облегчения проверки на стороне сервера.
Март
11
@martti Я имел в виду тот факт, что если я тестирую какую-то новую проверку PHP, я могу быстро отключить проверку JavaScript для этой формы, чтобы избежать необходимости правильно заполнять всю форму. Я должен был написать «проще проверить».
rybo111
31

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

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

Бен Бойл
источник
Отлично - завтра попробую и дам знать, как все будет. Спасибо.
nickf
Вот Это Да! Мне было очень тяжело смотреть, куда пропало мое событие отправки. Спасибо, сэр!
Цыганский король
2
FireFox проверяет правильность ввода. Тогда «недействительное» событие не запускается. Так что для меня нет решения.
Нильс Стинбек
7
завтра никогда не наступит :)
Lucky Soni
4
Не работает Я сделал код фрагментом. Поймать invalidсобытие и вернуть false не позволяет форме отправить.
Дан Даскалеску
23

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

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

BFTrick
источник
Как назывались записи?
tm_forthefuture
1
Ха-ха - я не знаю больше извините. Это было 3 года назад. :(
BFTrick
1
Вы имеете в виду <form action="" method="" class="" id="" novalidate>
Мухаммед Шахзад
15

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

Plancton
источник
13

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

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

Джон Кугельман
источник
5
+1 за совет, но это не будет решением для меня, к сожалению. Я до сих пор не хочу никакой проверки, главным образом потому, что UX для него так беден.
nickf
10

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

Валь Энтин
источник
1
Это не работает в последней версии Chrome (29), интересно, из-за
мерцания
5

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

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

Ура !!!

brainSquezer
источник
1
а как насчет отключения проверки для одного тега ввода?
Тобиас Колб
0

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

Вы можете добавить немного 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);
Тобиас Колб
источник
-5

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

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

Андрей Жилин
источник
Не знаю, почему многим людям не нравится это решение, оно позволяет тестировать проверку сервера для форм HTML5, не вставляя фактический HTML-код
Андрей Жилин
3
Я полагаю, что это не нравится, потому что вопрос сосредоточен вокруг создания формы HTML5 и выключения автоматической проверки для всех пользователей. Попросить всех ваших пользователей A) использовать Chrome и B) установить расширение перед использованием вашего сайта не является надежным решением.
Kallmanation