Вимкнути перевірку елементів форми HTML5

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

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

Я знаю, що міг би просто повернутися до використання, type="text"але я хочу приємних удосконалень, використовуючи ці пропозиції нових типів (наприклад: він автоматично переходить на власну розкладку клавіатури на мобільних пристроях):

Отже, чи є спосіб вимкнути або налаштувати автоматичну перевірку?

Якщо ви хочете вимкнути перевірку на стороні клієнта для форми в HTML5, додайте атрибут novalidate до елемента форми. Наприклад:

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

Дивіться https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

Я прочитав специфікацію і провів тестування в 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, які стосувалися псевдокласів. Якщо хтось знайде інше рішення, будь ласка, дайте мені знати.

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

Також у вас є можливість замінити шаблон за замовчуванням на шаблон атрибута = "https?: //.+", наприклад, щоб бути більш дозволеним.

Якщо атрибут novalidate у формі не є правильною відповіддю на поставлене запитання, оскільки він видаляє перевірку для всіх полів форми, і, можливо, ви хочете зберегти перевірку для полів електронної пошти, наприклад.

Використання jQuery для відключення перевірки також є поганим рішенням, оскільки воно має працювати абсолютно без JavaScript.

У моєму випадку я ставлю елемент вибору з двома параметрами (http: // або https: //) перед введенням URL-адреси, оскільки мені просто потрібні веб-сайти (а не ftp: // або інші речі). Таким чином я уникаю вводити цей дивний префікс (найбільший жаль Тима Бернерса-Лі та, можливо, головне джерело помилок у синтаксисі URL), і я використовую просте введення тексту з inputmode = "url" із заповнювачами (без HTTP). Я використовую сценарій jQuery та сервер на стороні для перевірки реального існування веб-сайту (№ 404) та для видалення префікса HTTP, якщо він вставлений (я уникаю використання шаблону типу pattern = "^ ((? Http).) * $" щоб не ставити префікс, тому що я вважаю, що краще бути більш дозволеним)

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

Це не було б точно так, оскільки він не надав би «вихідну точку» для користувача, але це, принаймні, на півдорозі.

Я знайшов рішення для 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

Просто використовуйте невалід у своїй формі.

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

Ура !!!

Ось функція, яку я використовую для запобігання показу хромовим та операційним недійсним діалоговим вводом, навіть коли не використовується.

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;
});

ви можете додати трохи 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);

Якщо ви позначите елемент форми як required=""тоді, novalidate=""це не допоможе.

Спосіб обходу requiredперевірки - відключення елемента .

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

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