Laboration 4. Laboration 4, Formulärvalidering. Inledning. Observera. Mål. Genomförande

Transkript

1 Laboration 4 Laboration 4, Formulärvalidering Observera För att bli godkänd på laborationen ska din källkod följa den standard vad det gäller kommentering, val av variabelnamn m.m. som gåtts igenom på föreläsning. Ditt JavaScript måste även fungera enligt de krav som finns beskrivna i denna laborationshandledning. För att bli godkänd på laborationen ska din källkod följa valfri W3Cs rekommendation. För att kunna genomföra denna laboration måste du vara förberedd innan du går på handledningstillfället, det är inte förbjudet att göra laborationen i förväg. Tid att sätta sig in i hur JavaScripten ska fungera eller skrivas kommer inte att finnas under den lärarledda handledningstiden. Vid fuskmisstanke lämnas misstankar samt berörda dokument över till universitetets disciplinnämnd. Läs igenom hela laborationshandledningen innan du påbörjar laborationen. Inledning Dessa laborationer ställer högre krav på dig som laborant. Du kommer till stor del vara tvungen att leta upp information själv och fundera ut egna lösningar på problem som ställs. I denna laboration kommer du att genomföra en validering av ett formulär. Mål Efter genomförd laboration kommer du att kunna validera formulärdata med hjälp av reguljära uttryck samt har repeterat stora delar av det kursen behandlat. Genomförande Utför laborationens uppgifter och moment samt dokumentera vad du kommer fram till på de olika delarna. Vid redovisning av laborationen ska du kunna besvara frågor om hur du har löst de olika delarna och varför de är lösta på det sätt du löst dem på. När du anser dig vara klar med laborationen, kontrollera att din källkod uppfyller laborationens samtliga krav. Laborationen ska lösas enskilt.

2 Uppgift: Validering av formulär I denna uppgift ska du skriva en klassisk validering av ett formulär med klientdata. Vi ska också försöka hjälpa användaren en bit på vägen... Moment 1 - Formuläret Börja med att skapa ett formulär i HTML och CSS med valfritt utseende. Det är helt ok (ja, kanske till och med att rekommendera) att använda ett css-ramverk så som Bootstrap för detta. Formulärdatat ska skickas till sidan: tt/wp_webbteknik/process_form.php Metoden som används för att skicka datan ska vara POST. Testa nu att formuläret fungerar och att datan skickas till sidan som är angiven ovan och på denna sida presenteras. Moment 2 - Valideringen Du ska nu se till att validera dokumentet innan det skickas. All JavaScript-kod som används lägger du i ett objekt, t.ex. Validator eller liknande. Ingen JavaScript kod får finnas inbäddad direkt på HTML-sidan. Fälten ska valideras enligt följande: Förnamn: Får inte vara tom. Efternamn: Får inte vara tom Postnummer: Postnumret ska anges på formen: XXXXX, d.v.s. t.ex E-post: Enbart e-postadresser på korrekt form får anges här. Prismodell: behöver inte valideras på klientsidan. Om ett fel i ett fält hittas ska detta tydligt markeras då användaren lämnar det aktuella textfältet. Kontrollera att samtliga fält uppfyller den validering som krävs och att uppgifterna skickas som förut om allt är OK. I denna laboration ska du inte använda innerhtml utan skapa samtliga objekt med document.createelement() Utvecklad av Johan Leitet och Erik Karlsson 2007, uppdaterad 2012 Sidan 2 av 5

3 Moment 3 Hjälp användaren Felmeddelanden är inget som gör en användare glad, och vi vill ju ha glada användare! Varför då visa felmeddelanden om vi med kod kan rätta till dem? Du ska därför se till att användaren kan skriva sitt postnummer på ett antal olika format, men när användaren lämnar textfältet så görs användarens postnummer automatiskt om till det format vi vill ha, nämligen XXXXX. De format som vi ska kunna hantera är: XXXXX XXX-XX XXX XX SEXXXXX SEXXX-XX SEXXX XX SE XXXXX SE XXX-XX SE XXX XX Om något av formaten ovan påträffas så ska detta göras om till XXXXX. Om formatet inte överrensstämmer så ska fortfarande ett felmeddelande visas. X motsvarar en siffra 0-9. Utvecklad av Johan Leitet och Erik Karlsson 2007, uppdaterad 2012 Sidan 3 av 5

4 Moment 4 Popup För att ytterligare säkerställa att användaren matar in korrekta uppgifter så ska användaren bli tillfrågad om dennes uppgifter är korrekta via en modal popup-ruta. Det vill säga en popup som enbart tillåter att användaren gör val i popupen och inte samtidigt kan ändra i t.ex. formuläret i bakgrunden. För att tydliggöra för användaren att det är popuprutan fokus ska läggas på ska bakgrunden dimmas medan popuprutan visas. I popupen ska användaren få den data denne skrivit in presenterad för sig samt ges två val: Bekräfta ditt köp (eller motsvarande) Avbryt Om Bekräfta ditt köp klickas ska formuläret skickas och om Avbryt så ska användaren återigen få möjlighet att ändra i formuläret. När du konstruera popup-rutan så ska texten till respektive fält ( Förnamn:, Postnummer: etc.) dynamiskt läsas in från formuläret. Detta ska allts inte hårdkodas i popupen! Popuprutan visas först när användaren klickar på Geonför köp-knappen Popuprutan inte visas om formuläret innehåller någon felaktighet De val användaren gör i formuläret presenteras i Popuprutan Användaren kan välja att avbryta eller bekräfta köp Bakgrunden är gråad och det går inte att klicka i formuläret då popuprutan visas. Utvecklad av Johan Leitet och Erik Karlsson 2007, uppdaterad 2012 Sidan 4 av 5

5 Kontrollera uppgiftens krav (bocka av) HTML-dokumentet är validerat och godkänt enligt valfri W3Cs rekommendation. Det finns ingen JavaScript-kod i.html-dokumentet eller i den genererade av JS genererade html-koden. Sidan fungerar utan JavaScript men formuläret skickas oavsett vad användaren skriver när JavaScript är avaktiverat i webbläsaren. JavaScriptet är helt befriat från CSS-kod innerhtml används inte någonstans i laborationen. Utvecklad av Johan Leitet och Erik Karlsson 2007, uppdaterad 2012 Sidan 5 av 5