ENSE
Kontakt

Formulären funkar inte, Firefox!

[box type=”download” icon=”none”]

[unordered_list style=”star”]

  • Uppdatering och förtydligande för er lite mer tekniska: Efter en Twitter-diskussion med @icaaq inser jag att det finns risk för missförstånd och förhastade slutsatser. Detta gäller Firefox beta 7 och framåt. I grund och botten ska Firefox trigga på type och required attributen, inte på class-attribut innehållande dessa ord, men i ett fall har den gjort det. Jag gillar iofs inte heller att Firefox triggar på type och required attribut utan att fråga, men rätt ska vara rätt och vi söker just nu efter de exakta parametrar som gör att felet går att reproducera på ett enkelt sätt. Eftersom det är påskhelg så kanske det dröjer lite med nästa uppdatering, men stay tuned!
  • Uppdatering 2: Det är när formuläret har specifika type-attribut angivna som valideringen triggas i Chrome 10.0.648.205 och Firefox 4.0. I det fall som exemplifieras med en bild nedan så används Ruby on Rails-tillägget formtastic – och det verktyget lägger till type=”email” på alla fält som har namn som börjar på email. Problemen med validering som man inte ber om kvarstår dock och kan förmodligen triggas på samma sätt av åtskilliga plugin och bibliotek som inte förutsett denna utveckling — men säkert är problemet inte lika akut som jag först trodde: jag behöver kolla hur t ex jquery validation fungerar ihop med detta. Det viktigaste är nu för alla formulärutvecklare att hålla koll på detta fenomen framöver och hela tiden ta ställning till om man måste stänga av eller kombinera valideringsmetoder.

[/unordered_list]

[/box]

Validering av formulär innan de skickas, en automatisk koll av att man fyllt i rätt format eller innehåll, kallas i webbvärlden för client-side validation, låt oss kalla det klientvalidering. Ofta innebär det att felmeddelanden visas samtidigt som du fyller i formuläret. För att åstadkomma sådan validering används Javascript, och på senare tid även HTML5. Webbläsaren Firefox 4 har nu infört en inbyggd klientvalidering utan Javascript, vilket säkert får många att jubla i tillgänglighetens namn. Men jublet blir ett bittert kluckande, för nu slutar tusentals formulärfält över hela jordklotet att fungera!

[box type=”note”]Jag fick detta tips skickat till mig av min tidigare kollega Stefan Pettersson som just nu brottas med ganska avancerade formulär i ett projekt. När ett av hans formulär plötsligt slutade fungera visade det sig att Firefox på egen hand bestämt sig för vad som måste stå i formulären![/box]

Klientvalidering är bra, tillgänglighet är dock ett måste

Det kan vara till stor hjälp att formulärfält rättas innan du skickar, eftersom de rättas direkt i sitt sammanhang och det blir lättare för den som fyller i formuläret. Alternativet är att man långt efter att man fyllt i fältet får ett meddelande om att det är fel. Men givetvis ska formuläret fungera, med rättning, även i äldre webbläsare eller utan Javascript aktiverat. Jag skrev en artikel för Datormagazin om fenomenet för några år sedan och du kan ta en titt på mitt enkla formulärexempel från artikeln, så förstår du principen (prova att fylla i formuläret).

Problem med formulär i Firefox

I korthet innebär den nya Firefox-funktionaliteten att man i sina formulär kan infoga attribut som innebär att de valideras. Problemet är att attribut-namnen krockar med de attribut-namn som används av flera Javascript-bibliotek (standardiserade funktioner som underlättar programmering) som syftar till att åstadkomma liknande saker.

Ofta är dessa attribut ganska generiska i namnsättningen, exempelvis orden “required” för obligatoriska fält och “email” för fält som ska valideras som e-postadresser.

Det är just vad som hänt i bilden ovan. Eftersom class-namnet i HTML-koden för det aktuella formulärfältet innehåller begreppet “email required (Det räcker inte med class, utan type-attributet måste till, se uppdatering 2 ovan) så har Firefox bestämt sig för att det måste vara en korrekt e-postadress i fältet innan formuläret får skickas, och kastar således upp ett engelskt felmeddelande. Trots att avsikten inte är att mata in e-postadress i just detta fält så är formuläret nu plötsligt helt obrukbart. Firefox griper in helt oinbjuden.

Andra problem med Firefox-validering

När webbläsare börjar bete sig olika dyker det upp problem. Jag håller inte med Mounir Lamouri när han skriver:

[quote]For the user, the validation being done by the browser is a guarantee of quality with better accessibility and consistency.[/quote]

Tvärtom så ställer det till det för många.

  • Jag vill att valideringen ska se likadan ut för alla fält, i alla webbläsare, annars blir det förvirrande. Nu dyker någots sorts standard-Firefox felmeddelande upp.
  • Jag måste ändå alltid skriva mina egna valideringsregler (till exempel för svenska personnummer) så nu måste jag plötsligt förhålla mig till två olika lösningar på valideringen. Det tar inte mindre tid, det tar mer tid.
  • Hur mycket Firefox än hävdar att detta underlättar så ställer det till extra problem för oss som jobbar i andra språk och dessutom verkligen vill styra hur felmeddelanden formuleras för att passa ihop med sajtens tonalitet.
  • Och när Firefox tar över valideringar utan att tala om det, det tycker jag är rent ut sagt oförskämt, skadligt och kan alltså innebära direkta förluster i reda pengar för många företag!

[box type=”alert”]Istället för en opt-in möjlighet för denna funktionalitet så har Firefox alltså valt en opt-out regel. Om du inte säger att du inte vill ha den här valideringen så får du den. Det är spam-fasoner och jag gillar det inte. Alls.[/box]

Så nu vill jag veta hur Firefox tänkt bemöta och hantera alla dessa problem. Men tack till Stefan som uppmärksammade detta och förhoppningsvis kan fler hitta boven i dramat när deras formulär slutar fungera i Firefox på grund av detta.

Glad påsk och inget fylleri för den som fyller i!

Jag håller posten uppdaterad med intressanta länkar i ämnet:


Per Axbom
2011-04-21
  • http://www.lumano.se Stefan Pettersson

    Det där med validering är ju en utmaning både på konceptnivå och detaljnivå:

    Koncept: Ska vi hålla på och störa användaren med detaljkrav på hur de skriver in saker. Och kan vi vara säkra på att vi vet bäst?

    Och på detaljnivå: Ska vi bara kolla att mejladressen innehåller minst ett snabel-a för att anses valid, eller ska vi verkligen göra allt för att förstå om den är “brukbar”. Och kan vi vara säkra på att vi vet hur man ska validera t.ex. ett klockslag. Jag kanske vet vad som är korrekt men praxis kanske är något annat.

    Jag är nog inne på att vara rätt så liberal på vad jag släpper igenom, men för kritiska saker – som kanske förstör användningen – så kan jag excellera i detaljer. T.ex. mejladress.

  • http://cynatic.org Andreas Johansson

    Aha, tack för detta. Satt som en galning och funderade varför i hela friden inte min validering fungerade helt plötsligt.

  • http://axbom.se axbom

    @Stefan: håller med. Med formulär som har väldigt lite trafik sä släpper jag hellre igenom småfel än slänger upp störande felmeddelanden.

    @Andreas: Givet ny information i uppdateringarna ovan, kan du beskriva hur felen dök upp hos dig?

  • http://cynatic.org Andreas Johansson

    @axbom: Som jag märkte det så körde jag med jquery validator på ett större formulär där valideringen för “date required” helt plötsligt slutade fungera för FF-användarna. Vilken data som än stoppades in så togs den inte emot utan blev ogiltig.

    Har temporärt inaktiverat valideringen tills jag får tid att kolla upp det på riktigt, ser detta som en möjlig del av problemet.

  • http://mediascreen.se Marcus Andersson

    Hm, det verkar lite hårt att kalla Firefox oförskämt för att de helt enkelt har implementerat en del av formulärdelen i HTML5: http://www.w3.org/TR/html5/states-of-the-type-attribute.html#e-mail-state

    Att webbläsare börjar bete sig olika genom att implementera standarder i olika takt är ju knappast något nytt och kanske något man borde vara medveten om om man bygger webbplatser.

    Det som har hänt här är att någon explicit bett om validering av e-postfältet och sen blivit förvånad av att man fått det. Det är som att sätta type till password och bli förvånad över att tecknen inte går att läsa.

    Formtastic verkar välja den typ som passar bäst för den datatypen som frågas efter. För att ändra typen så är det tydligen bara att använda as:text https://github.com/justinfrench/formtastic/wiki/4.1-Options-Cheat-Sheet

  • http://axbom.se axbom

    @Marcus Jag håller med om att det kan ha varit lite hårt men som du ser av uppdateringarna överst så trodde jag först det räckte med class-attributet vilket alltså var felaktigt. Däremot så ställer det ju till en massa följdproblem närt många js-bibliotek och tillägg har använt sig av de aktuella attributen för att indikera hur fält ska valideras. Det blir krockar.

    Och visst kan man argumentera för att det är tilläggsutvecklarna som
    då gjort fel (fast du hittade en enkel lösning, tack för det! =) ), men problemet kvarstår att det sker en validering av en typ som man inte varit medveten om att man bett om, och får till exempel engelska felmeddelanden i en design som inte matchar övrig validering.

    Jag hade nog ändå hellre sett att man har möjlighet att “slå på” den här valideringen i Firefox snarare än att man tvingas stänga av den. För visst har den ett nobelt syfte, det håller jag med om, men krockarna som sker i den första implementationen av detta kan skapa en hel del oreda och förvirring för många stackars sajtägare.

  • http://rasmus.krats.se/ Rasmus Kaj

    Åh, håller firefox äntligen på att implementera formulärvalidering enligt html5, vad bra! Trist ätt verktyget formtastic tydligen är trasigt, men låt inte det hindra utvecklingen!

  • http://axbom.se axbom

    Här är en artikel som beskriver problematiken med “fula” felmeddelanden, som dessutom är på engelska. Vet inte hur de eventuella svenska felmeddelandena ser ut i varje browser ännu…

    http://www.broken-links.com/2011/03/28/html5-form-validation/

    I kommentarerna där beskrivs också hur man i Firefox kan sätta sitt eget felmeddelande. Men det gäller alltså bara Firefox.

dela vidare

0 tecken

Länk som delas: http://axbom.se/formularen-funkar-inte-firefox

skicka till Twitter

dela på LinkedIn


dela länk på Facebook

CC BY 4.0