design

Formulären funkar inte, Firefox!

Per Axbom

Per Axbom

[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:

Read more