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?
źródło
inputmode
atrybucie , 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życieinputmode
atrybutu zamiasttype
atrybutu będzie prawdopodobnie poprawnym rozwiązaniem tego problemu - ale jeszcze nie.$('[inputmode]').each(function () { this.attr({type: this.attr('inputmode'), novalidate: true}) });
inputmode
byś. Robiąc to po swojemu, nadal nie możesz (na przykład) odczytać wartości nienumerycznych, które użytkownik wpisuje w polu tekstowym typunumber
. Na przykład spróbuj wpisać coś nienumerycznego w polu tekstowym w tym skrzypce i kliknij przycisk.<input type='number'>
ogóle nie akceptuje wartości nienumerycznych?Odpowiedzi:
Jeśli chcesz wyłączyć sprawdzanie poprawności po stronie klienta dla formularza w HTML5, dodaj nowelizujący atrybut do elementu formularza. Dawny:
Zobacz https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate
źródło
novalidate="novalidate"
inovalidate=""
jest również poprawną składnią.novalidate="novalidate"
metody można ustawićnovalidate => true
w$options
tablicęFormHelper::create()
. Dzięki bassim za dodatkowe informacje :)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.
Nie testowałem tego w żadnej innej przeglądarce.
źródło
invalid
zdarzenia i zwrócenie wartości false nie pozwala na przesłanie formularza.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ć.
źródło
<form action="" method="" class="" id="" novalidate>
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)
źródło
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ś:Nie byłby dokładnie taki sam, ponieważ nie zapewniłby użytkownikowi „punktu wyjścia”, ale jest przynajmniej w połowie drogi.
źródło
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.
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
źródło
Po prostu skorzystaj z novalidate w swoim formularzu.
Twoje zdrowie!!!
źródło
Oto funkcja, której używam, aby zapobiec wyświetlaniu nieprawidłowego okna dialogowego wprowadzania przez chrome i operę, nawet gdy korzystam z novalidate.
źródło
możesz dodać trochę javascript, aby zignorować te ohydne bąbelki sprawdzania poprawności i dodać własne weryfikatory.
źródło
Jeśli zaznaczysz element formularza jako,
required=""
tonovalidate=""
nie pomoże.Sposobem na obejście
required
sprawdzania poprawności jest wyłączenie elementu .źródło
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
źródło