Wyłącz sprawdzanie poprawności elementów formularza HTML5

W moich formularzach chciałbym na przykład używać nowych typów formularzy HTML5 <input type="url" />( więcej informacji o typach tutaj ).

Problem polega na tym, że Chrome chce być bardzo pomocny i sprawdzać te elementy, chyba że jest do bani. Jeśli nie powiedzie się wbudowane sprawdzanie poprawności, nie będzie żadnego komunikatu ani wskazania innego niż element, na który ma być ustawiony fokus. Wstępnie wypełniam elementy URL "http://", więc moja własna walidacja traktuje te wartości jako puste ciągi, jednak Chrome je odrzuca. Gdybym mógł zmienić reguły sprawdzania poprawności, to też by działało.

Wiem, że mógłbym po prostu wrócić do używania, type="text"ale chcę miłych ulepszeń przy użyciu tych nowych typów ofert (np .: automatycznie przełącza się na niestandardowy układ klawiatury na urządzeniach mobilnych):

Czy istnieje sposób na wyłączenie lub dostosowanie automatycznej weryfikacji?

Jeśli chcesz wyłączyć sprawdzanie poprawności po stronie klienta dla formularza w HTML5, dodaj nowelizujący atrybut do elementu formularza. Dawny:

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

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

Przeczytałem specyfikację i przeszedłem testy w Chrome, a jeśli złapiesz „nieprawidłowe” zdarzenie i zwrócisz false, wydaje się, że zezwala na przesłanie formularza.

Używam jquery, z tym 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>

Nie testowałem tego w żadnej innej przeglądarce.

Chciałem tylko dodać, że użycie atrybutu novalidate w formularzu tylko uniemożliwi wysyłanie formularza przez przeglądarkę. Przeglądarka nadal ocenia dane i dodaje: pseudoklasy: valid i: invalid.

Dowiedziałem się tego, ponieważ prawidłowe i niepoprawne pseudoklasy są częścią arkusza stylów HTML5, którego używałem. Właśnie usunąłem wpisy w pliku CSS, które dotyczyły pseudoklas. Jeśli ktoś znajdzie inne rozwiązanie, daj mi znać.

Najlepszym rozwiązaniem jest użycie wprowadzania tekstu i dodanie atrybutu inputmode = "url", aby zapewnić obsługę klawiatury URL. W tym celu opracowano specyfikację HTML5. Jeśli trzymasz type = "url", otrzymujesz sprawdzanie poprawności składni, która nie jest przydatna w każdym przypadku (lepiej sprawdzić, czy zwraca błąd 404 zamiast składni, która jest dość liberalna i nie jest bardzo pomocna).

Masz również możliwość zastąpienia domyślnego wzorca atrybutem wzorzec = „https?: //.+”, na przykład, aby być bardziej liberalnym.

Umieszczenie atrybutu novalidate w formularzu nie jest właściwą odpowiedzią na zadane pytanie, ponieważ usuwa sprawdzanie poprawności dla wszystkich pól w formularzu i możesz chcieć zachować weryfikację na przykład dla pól e-mail.

Użycie jQuery do wyłączenia sprawdzania poprawności jest również złym rozwiązaniem, ponieważ absolutnie powinno działać bez JavaScript.

W moim przypadku umieszczam element select z 2 opcjami (http: // lub https: //) przed wprowadzeniem adresu URL, ponieważ potrzebuję tylko stron internetowych (i nie ftp: // ani innych rzeczy). W ten sposób unikam wpisywania tego dziwnego przedrostka (największy żal Tima Bernersa-Lee i być może głównego źródła błędów składni URL) i używam prostej metody wprowadzania tekstu z inputmode = "url" z symbolami zastępczymi (bez HTTP). Używam jQuery i skryptu po stronie serwera, aby zweryfikować rzeczywiste istnienie strony internetowej (nr 404) i usunąć prefiks HTTP, jeśli jest wstawiony (unikam używania wzorca podobnego do wzorca = "^ ((? Http).) * $" aby zapobiec wstawianiu prefiksu, ponieważ myślę, że lepiej być bardziej liberalnym)

Zamiast próbować zakończyć sprawdzanie poprawności przeglądarki, możesz wstawić http://tekst jako symbol zastępczy. To jest od strony, którą podłączyłeś:

Tekst zastępczy

Pierwszym ulepszeniem HTML5 do formularzy internetowych jest możliwość ustawienia tekstu zastępczego w polu wejściowym . Tekst zastępczy jest wyświetlany w polu wejściowym, dopóki pole jest puste i nieostre. Po kliknięciu (lub tabulacji) pola wprowadzania tekst zastępczy znika.

Prawdopodobnie już widziałeś tekst zastępczy. Na przykład Mozilla Firefox 3.5 zawiera teraz tekst zastępczy na pasku lokalizacji, który brzmi „Przeszukaj zakładki i historię”:

Po kliknięciu (lub tabulacji) paska lokalizacji tekst zastępczy znika:

Jak na ironię Firefox 3.5 nie obsługuje dodawania tekstu zastępczego do własnych formularzy internetowych. C'est la vie.

Wsparcie zastępcze

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

Oto jak możesz dołączyć tekst zastępczy do własnych formularzy internetowych:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

Przeglądarki, które nie obsługują tego placeholderatrybutu, po prostu go zignorują. Bez szkody, bez faulu. Sprawdź, czy Twoja przeglądarka obsługuje tekst zastępczy .

Nie byłby dokładnie taki sam, ponieważ nie zapewniłby użytkownikowi „punktu wyjścia”, ale jest przynajmniej w połowie drogi.

Znalazłem rozwiązanie dla Chrome z CSS za pomocą następującego selektora bez ominięcia natywnego formularza weryfikacji, co może być bardzo przydatne.

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

W ten sposób możesz również dostosować swoją wiadomość ...

Mam rozwiązanie na tej stronie: http://trac.webkit.org/wiki/Styling%20Form%20Controls

Po prostu skorzystaj z novalidate w swoim formularzu.

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

Twoje zdrowie!!!

Oto funkcja, której używam, aby zapobiec wyświetlaniu nieprawidłowego okna dialogowego wprowadzania przez chrome i operę, nawet gdy korzystam z 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;
});

możesz dodać trochę javascript, aby zignorować te ohydne bąbelki sprawdzania poprawności i dodać własne weryfikatory.

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

Jeśli zaznaczysz element formularza jako, required=""to novalidate=""nie pomoże.

Sposobem na obejście requiredsprawdzania poprawności jest wyłączenie elementu .

Możesz zainstalować proste rozszerzenie chrome i po prostu wyłączyć sprawdzanie poprawności w locie https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

domyślnie wszystko działa domyślnie, ale będziesz mógł wyłączyć sprawdzanie poprawności HTML5 jednym kliknięciem ikony rozszerzenia na pasku narzędzi