Registreringsformulär är alltför vanliga när du bygger nya webbapplikationer eller sociala nätverk. Traction från användarregistreringar kan verkligen öka ditt eget självförtroende om ett projekt när det gäller att starta en ny webbplats. Men vad kan du göra för att förbättra registreringsupplevelsen och förhoppningsvis få fler intresserade användare?
I den här handledningen vill jag visa hur vi kan bygga ett guidat registreringsformulär och erbjuda tips till användare när de fyller i varje fält. Jag har tagit med några av mina egna jQuery tillsammans med ett plugin som heter Progression.js. Detta är ett kraftfullt verktyg som erbjuder ett steg för steg verktygstips med hjälp av tips för att styra användare längs vägen. Känn dig fri att ladda ner en kopia av min källkod och kolla in demodemonstret nedan.
Live Demo - Hämta källkod
Komma igång
Först måste vi hämta en kopia av Progression.js-plugin och inkludera detta inom webbplatshuvudet. Progression använder en enda JS-fil med ett beroende av jQuery-biblioteket, tillsammans med egna anpassade CSS-format. Ta en kopia från den officiella Github repo som även innehåller en egen mini demo setup.
Inne i sidkroppen har jag skapat en ny blankett med ID #registerform. Detta är sidelementet som vi ansluter till med hjälp av Progressions-funktionen, tillsammans med ett antal interna parametrar. Det är intressant att notera att verktygstipsen kommer att visas längs hela blankformens hela bredd, inte nödvändigtvis längden på inmatningsfälten. Så du vill se till att allt är korrekt anpassat med CSS på vilken sida du har verktygetips som visas (vänster eller höger).
Var och en av inmatningsfälten har ett extra HTML5-dataattribut bifogat som innehåller en textsträng för verktygstipsen. Detta är märkt med data helper och hämtas automatiskt av plugin. Jag har inkluderat a tabindex attribut på varje fält som också hjälper mobila användare att snabbt flytta från ett fält till nästa.
Även om denna blankett är något grundläggande, illustrerar den tydligt de mönster du kan använda för att integrera plugin. Jag har också inkluderat några av mina egna mindre jQuery-logikkontroller som bestämmer om användarnamnet är tillräckligt länge, om e-postadressen är giltig och om båda lösenordsfälten matchar. Dessa koder är inte relaterade till plugin men kan fortfarande vara användbara för utvecklare som bygger liknande typer av webbformulär.
Siddesign med CSS
En annan viktig del av min kod finns i styles.css formatmallen. Jag ställer in standardwebbplatsen återställs tillsammans med kärnförpackningen, men kom ihåg hur formuläret också måste vara i en exakt bredd som är lika med längden på inmatningsfälten.
De #registerform elementet är låst med en full bredd på 512px tillsammans med de interna etikett- / inmatningsfälten i en bredd av 160px + 340px (totalt 500). Märken och inmatningsfälten lämnar lite extra utrymme för vaddering så att verktygstipsen inte är rätt ovanpå någonting. Även .basetxt klassen appliceras på varje ingång som använder CSS3-övergångar för att färga gränsen och boxskuggningseffekten.
En annan viktig del i detta hänför sig till felmeddelandet p.errmsg. Du hittar dessa under tre av de fyra fälten som alla hänför sig till jQuery-valideringskontroller. Meddelandena är dolda som standard med display: none och visas sedan med jQuery's .slideDown () -metod.
Dessa sista block av kod definierar knappen Submit-format, tillsammans med några anpassade mönster för verktygstipset. Du kan bara redigera CSS-plugin-filen, men det gör det svårare att uppgradera i framtiden. Det kan också vara svårt att veta exakt vad du redigerat och återställa förändringar skulle vara nästan omöjligt. Om du vill skriva över några av pluginstilarna väljer du bara genom progression.min.css och lär dig vilka klasser du behöver rikta in.
jQuery Progression & Validation
Längst ned på indexsidan före stängningen tagg Jag har öppnat en ny JavaScript-sektion. Detta inkluderar Progression.js-initialiseringen plus några av mina egna valideringskontroller. Det är något trångt men jag kommer att bryta ner det i mindre bitar.
Vi riktar in den registreringsblankett vi ringer till .progression () med ett antal interna parametrar. Jag tror att de flesta (om inte alla) av dessa parametrar kan tala för sig själva och plugin dokumentationen kan också förklara mycket. showProgressBar är en som jag stängde av i det här exemplet, eftersom jag tycker att det inte fungerar bra med bara 4 ingångar. Men det ger en känsla av användartillfredsställelse när du behöver ett stort antal fält, eftersom användarna faktiskt kan se sig själva gå vidare mot slutförandet.
Också tooltipPosition och tooltipWidth kan vara värt att anpassa och se hur de passar bäst i dina formulär. De övriga inställningarna som färger och teckensnitt är verkligen lätt att manipulera och passa in i vilken form som helst. Observera också att jag har länkat en .submit () händelsehanterare på detta formulär också. Så när formuläret skickas kallar vi .preventDefault () på inlämningsevenemanget för att stoppa det. Detta beror på att min blankett inte har någon verklig åtgärdsattribut, men för en levande arbetsform ska du helt och hållet ta bort den här kedjade händelsehanteraren.
Vart och ett av de sista 3 valideringsblocken kommer att kontrollera när användaren försvinner ett inmatningsfält. Det här första stycket kod körs efter att användaren fokuserat och slår sedan bort användarnamnet. Om användarnamnlängden är mindre än 6 tecken visas felmeddelandet nedan. Annars om användarnamnet är 6 tecken eller mer kan vi dölja felmeddelandet, förutsatt att det redan visas.
Dessa två sista valideringskontroller är beroende av samma typ av logik. Först är e-postinmatningsfältet som använder en regex-sträng för att kontrollera en giltig e-postadress. Jag hittade den här lösningen på en relaterad Stack Overflow-fråga som ger en enkel men effektiv e-postsyntax. Detta exempel ska vara mer än tillräckligt för att hantera en vanlig e-postadress.
Om du tittar på lösenordsvalideringen kommer du märka att detta inte inträffar förrän användaren blurar från det sekundära lösenordsfältet. Det här är när användaren måste skriva sitt lösenord igen och det kommer att kontrollera mot båda värdena för att se till att de är lika och inte helt tomt / tomt. Jag kontrollerar att lösenordet är minst 1 tecken långt, men du kan göra begränsningarna mer hårda efter behov.
Det finns några jQuery-plugins där ute som faktiskt hjälper till att köra dessa typer av valideringskontroller. Men om du är bekväm med scripting gör det inte ont att bara skriva egna regler från början.
Live Demo - Hämta källkod
Stängning
jQuery-utvecklare har gjort ett antal plugin-program för att hjälpa till med formframsteg.Registreringsformulär är ofta en knepig utmaning, eftersom de kräver en stor mängd information. Att tillämpa dessa programpunkter för progression kan verkligen uppmuntra användare att trycka igenom och avsluta registreringsprocessen snabbt utan mycket tvekan. Som alltid är min handledningskod gratis att ladda ner och implementera i dina egna webbprojekt. Också om du har några frågor eller förslag kan du dela med oss i diskussionsområdet nedan.