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

418

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?

pseudonim
źródło
8
Wersja robocza HTML 5.1 wspomina o inputmodeatrybucie , który - jeśli rozumiem, co poprawnie czytam - może zostać użyty do określenia, jaki typ klawiatury powinien być oferowany użytkownikowi podczas interakcji z polem, bez narzucania żadnych reguł sprawdzania poprawności. W pewnym momencie użycie inputmodeatrybutu zamiast typeatrybutu będzie prawdopodobnie poprawnym rozwiązaniem tego problemu - ale jeszcze nie.
Mark Amery
@MarkAmery Chociaż nie byłoby trudno zdobyć przyszłość teraz:$('[inputmode]').each(function () { this.attr({type: this.attr('inputmode'), novalidate: true}) });
Marnen Laibow-Koser
1
@ MarnenLaibow-Koser Chociaż to, co opisałeś, działa, jeśli wszystko, co chcesz zrobić, to wyłączyć sprawdzanie poprawności (zgodnie z pytaniem zadawanym przez pytającego), ale nie osiąga tego samego rezultatu, co inputmodebyś. Robiąc to po swojemu, nadal nie możesz (na przykład) odczytać wartości nienumerycznych, które użytkownik wpisuje w polu tekstowym typu number. Na przykład spróbuj wpisać coś nienumerycznego w polu tekstowym w tym skrzypce i kliknij przycisk.
Mark Amery
@MarkAmery Interesujące. Czy to dlatego, że w <input type='number'>ogóle nie akceptuje wartości nienumerycznych?
Marnen Laibow-Koser
@ MarnenLaibow-Koser Chyba tak. Przyjęta odpowiedź na to pytanie dotyczące problemu zawiera link do specyfikacji, która według twierdzenia osoby odpowiadającej na to upoważnia.
Mark Amery

Odpowiedzi:

752

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

Jakob S.
źródło
83
novalidate="novalidate"i novalidate=""jest również poprawną składnią.
bassim
9
@bassim Prawidłowa składnia, ale przesadna - po co pisać więcej niż trzeba?
user1569050,
11
@ user1569050 Na przykład w ramach takich jak CakePHP, będzie korzystał z novalidate="novalidate"metody można ustawić novalidate => truew $optionstablicę FormHelper::create(). Dzięki bassim za dodatkowe informacje :)
Jelmer
12
@ rybo111 To jest sprawdzanie poprawności po stronie klienta, co jest dobre, aby obniżyć liczbę żądań do serwera. Nie ma usprawiedliwienia dla ułatwienia sprawdzania poprawności po stronie serwera.
martti
11
@martti Miałem na myśli fakt, że jeśli testuję nową weryfikację PHP, mogę szybko wyłączyć weryfikację JavaScript dla tego jednego formularza, aby uniknąć konieczności poprawnego wypełnienia całego formularza. Powinienem napisać „łatwiej przetestować”.
rybo111
31

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.

Ben Boyle
źródło
Doskonale - wypróbuję to jutro i dam znać, jak to działa. Dzięki.
nickf
Łał! Naprawdę ciężko mi było zobaczyć, gdzie zniknęło moje zdarzenie. Dziękuję Panu!
Gipsy King
2
FireFox sprawdza poprawność zmiany danych wejściowych. Wówczas „nieprawidłowe” zdarzenie nie jest uruchamiane. Więc nie ma dla mnie rozwiązania.
Niels Steenbeek
7
jutro nigdy nie nadejdzie :)
Lucky Soni
4
Nie działa Zrobiłem z kodu fragment kodu. Złapanie invalidzdarzenia i zwrócenie wartości false nie pozwala na przesłanie formularza.
Dan Dascalescu,
23

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ć.

BFTrick
źródło
Jak nazywano wpisy?
tm_forthefuture
1
Haha - nie wiem, przepraszam. To było 3 lata temu. :(
BFTrick
1
Masz na myśli <form action="" method="" class="" id="" novalidate>
:;
15

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)

plancton
źródło
13

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ę”:

wprowadź opis zdjęcia tutaj

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

wprowadź opis zdjęcia tutaj

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.

John Kugelman
źródło
5
+1 za wskazówkę, ale niestety nie będzie to dla mnie rozwiązanie. Nadal nie chcę żadnej weryfikacji, głównie dlatego, że UX jest tak słaby.
nickf
10

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

Val Entin
źródło
1
To nie działa w najnowszej wersji chrome (29), zastanawiam się, czy to z powodu mrugnięcia
Blowsie,
5

Po prostu skorzystaj z novalidate w swoim formularzu.

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

Twoje zdrowie!!!

brainSquezer
źródło
1
co z wyłączeniem sprawdzania poprawności pojedynczego znacznika wejściowego?
Tobias Kolb
0

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;
});
Tony Brix
źródło
0

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);
Tobias Kolb
źródło
0

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

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

cweiske
źródło
-5

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

Andrew Zhilin
źródło
Nie jestem pewien, dlaczego wiele osób nie lubi tego rozwiązania, pozwala ono przetestować sprawdzanie poprawności serwera pod kątem formularzy HTML5 bez odczytywania rzeczywistego kodu HTML
Andrew Zhilin
3
Uważam, że nie podobało mu się to, ponieważ pytanie koncentruje się na budowaniu formularza HTML5 i wyłączeniu automatycznej weryfikacji dla wszystkich użytkowników. Poproszenie wszystkich użytkowników o A) skorzystanie z Chrome i B) zainstalowanie rozszerzenia przed skorzystaniem z witryny nie jest dobrym rozwiązaniem.
Kallmanation,