Отключить проверку элементов формы HTML5
в моих формах я хотел бы использовать новые типы форм HTML5, например <input type="url" />
(подробнее о типах).
проблема в том, что Chrome хочет быть очень полезным и проверять эти элементы для меня, за исключением того, что он отстой. Если он не проходит встроенную проверку, нет никакого сообщения или указания, кроме элемента, получающего фокус. Я prefill URL элементы с "http://"
, и поэтому моя собственная пользовательская проверка просто обрабатывает эти значения как пустые строки, однако Chrome отвергает это. Если бы я мог изменить его правила проверки, это тоже сработало бы.
Я знаю, что могу просто вернуться к использованию type="text"
но я хочу хорошие улучшения, используя эти новые типы предложений (например: он автоматически переключается на пользовательскую раскладку клавиатуры на мобильных устройствах):
и есть ли способ отключить или настроить автоматическую проверку?
9 ответов
Если вы хотите отключить проверку на стороне клиента для формы в HTML5, добавьте атрибут novalidate в элемент формы. Ex:
<form method="post" action="/foo" novalidate>...</form>
см.https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate
Я прочитал спецификацию и провел некоторое тестирование в 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 одним щелчком мыши на значке расширения на панели инструментов