Imponere dine besøgende med formularvalidering i realtid

online formular

Det første indtryk, du normalt har som bruger af en webapplikation, er når du udfylder en webformular. Jeg er forbløffet over antallet af webformularer derude, der har nul validering, eller som venter på, at du sender dit formularindhold, før du fortæller dig, hvilke problemer du måtte have.

Min tommelfingerregel er, at alt, der ikke er valideret, understøttes. Alt, hvad der kan valideres, inden formularen indsendes, skal være. Med fremkomsten af ​​Ajax kan du endda validere data i forhold til din database inden indsendelse. Vælg ikke den dovne rute - brugerne sætter pris på hjælpen!

Her er nogle eksempler:

  1. E-mail-adresser - Jeg har ikke noget imod formularer, der får dig til at udfylde din e-mail-adresse to gange for at validere dem, men det faktum, at de ikke fortæller dig, om de matcher eller er konstrueret korrekt, kan ikke undskyldes.
  2. Nulstilling/ændring af adgangskoder - Hvis du får mig til at indtaste en adgangskode to gange, skal du bekræfte, at værdierne er de samme, inden du sender formularen.
  3. adgangskodestyrke - Hvis du har brug for en bestemt adgangskodestyrke (kombination af alfanumeriske tegn eller tilfælde), skal du give mig feedback, mens jeg skriver min adgangskode. Vent ikke på, at jeg sender det, før jeg fortæller mig, at det mislykkedes.
  4. Datoer - Hvis du vil have datoen i am / d / åååå-format, så tillad mig at indtaste oplysningerne i et enkelt felt ved at skrive disse værdier og formatere dem korrekt. Hvis du vil have førende nuller, skal du sætte dem ind efter. Det er okay at vise et format og gemme et andet i din database.
  5. Dags dato - Udfyld det for mig! Hvorfor beder du mig om at udfylde datoen, når du allerede ved det ?!
  6. Dato format - Hvis du har en international ansøgning, kan du indstille et datoformat baseret på internationalisering af din ansøgning. Selvfølgelig er det godt at have en mulighed for brugerne at tilsidesætte denne mulighed og vælge deres egen.
  7. Social Security Numbers - det er ret simpelt at tilføje noget javascript, der automatisk springer fra felt til felt eller programmatisk sætter en strejke mellem værdierne.
  8. telefonnumre - under hensyntagen til internationalisering kan disse typer felter også forenkles ved at formatere telefonnummeret i grænsefladen, men gemme det i et andet format, der er effektivt til din back-end. Lad ikke dine brugere skrive parenteser, mellemrum og bindestreger.
  9. Maksimal tekstlængde - hvis du begrænser antallet af tegn gemt i din database, så lad mig ikke skrive så mange tegn ind! Det kræver ikke engang vanskelig validering ... det er bare en indstilling i tekstboksen.
  10. Minimum tekstlængde - hvis du har brug for en minimum tekstlængde, så slå alarmen, indtil jeg har nok tegn.

Her er et eksempel på en Password Strength-funktion fra Nørdens visdom:

Indtast adgangskoden:

OPDATERING: 10/26/2007 - Jeg fandt en pæn ressource med et JavaScript-bibliotek til download formvalidering, kaldet LiveValidation.

16 Kommentarer

  1. 1

    Jeg er enig i, at det er gode funktioner til formularer, men det er en mere personlig mening at sige, at det er "utilgiveligt" at ikke udføre javascript-validering af frontend. Jeg elsker at arbejde i javascript og har skrevet nogle pæne redigeringsmasker til at gøre nogle af de ting, du taler om, men mange af dem er langt fra trivielle, og mange af javascript-formvalideringspakkerne derude har et antal store huller. Ikke alle investerer tiden i at duplikere deres back-end-validering med (oftere end ikke) mere kompleks front-end-javascript-validering.

    Gode ​​point, men bestemt ikke noget, som enhver onlineformular "har brug for" efter min mening.

  2. 2

    Adgangskodekontrollen er relativt brudt. Enhver adgangskode er god nok, hvis den er lang.

    Eksempel:

    Er dette virkelig en middelmådig adgangskode?

    f46dffe6ff4ffgdfgfjfgyu656hfdt74tyhdtu5674yfgh6uhhye45herdhrt64684hythdfth54y54348fgdcvzse8cn984v3p4m6vq98476m3wuw89ewfucsd8fg67s4v8tw76u340m6tver7nt+s89346vs+0em9u+s+09hrtuhss586ysvne4896vb4865tbv089rt++

  3. 4

    For mig er den bedste formvalidering, når du giver brugeren indtryk af en klientsides validering, mens det er AJAX / serversidevalidering.
    Du skal simpelthen vedhæfte nogle formelementer til din formularhåndtering (keyup, sløring, klik osv.), Der sender hele formularen via AJAX til serveren, idet der påkaldes en "check" -funktion, der returnerer de tilsvarende fejlmeddelelser (dette passowrd er også simpelt, denne dato er i forkert format osv ...)
    Når brugeren endelig sender formularen ved at klikke på en indsendeknap, kan du stadig bruge "afkryds" -funktionen på serversiden til at validere formularen sidste gang, inden du indsætter dataene i en database eller en anden proces.
    På denne måde er brugerne tilfredse med onthego-validering OG udviklere er tilfredse med kun validering af serversiden.

    • 5
      • 6

        Ikke så hurtigt Doug - Jeg er enig med din oprindelige forudsætning om, at disse nyttige funktioner, såsom formatering af et SSN på farten, er trivielle. Og det er dovent at bare sende en besked om, at det er forkert, når du kan rette det uden at skulle gætte på formatet.

        Imidlertid er jeg også enig med Nicolas i at bruge Server Side-logik i forbindelse med AJAX.

  4. 7

    Din titel siger "Imponér dine venner ...", men du undlader at imponere mig med dette 2 min., Ringet i post.

    Omskriv din titel (for vildledende, får en til at tro, at der er eksempler og fremgangsmåder, der diskuteres).

    Hvis folk ikke allerede gør dette i deres former, lærer de bare, eller er formularen ikke vigtig nok til at bruge validering.

    Ægte webprogrammerere ved det allerede og gør det.

    • 8

      Jay,

      Det er jeg ked af! Mit punkt var bestemt ikke at give feedback fra udviklere - jeg kom virkelig fra en Product Manager's synspunkt. Jeg er enig med dig - men det er interessant, at nogle andre udviklere ikke gør det! Jeg synes det er uheldigt.

      Tak fordi du tog dig tid!
      Doug

  5. 9

    Jeg er helt enig i, at validering er en nødvendig komponent i enhver ansøgning. Som teamleder finder jeg normalt, at jeg sender kode tilbage for at være "færdig" af grunde som manglende valideringer eller begrænsning af tekstinputlængder.

    For de fleste ting, jeg arbejder på, finder jeg, at det tager cirka 50% af tiden at få noget til at fungere under normale forhold, og hvis brugerne bruger systemet som jeg havde tænkt mig. De øvrige 50% af udviklingstiden kommer fra at kontrollere deres input, sikre, at dataintegriteten opretholdes, og gøre formularfelterne ikke tilladelse til at indtaste ondsindede data.

    Jeg skrev et indlæg om, hvordan jeg bruger InputVerifiers i mine hava-swing-apps og viser, hvordan jeg bekræfter et e-mail-tekstfelt. Det regulære udtryk, jeg bruger, kan let ændres for at validere telefonnumre, postnumre, SSN'er osv.

    Mit blogindlæg er kl http://timarcher.com/?q=node/36

    God skrivning Doug!

  6. 10

    Jeg er enig. Adgangskoder er virkelig vigtige og skal tages alvorligt. Jeg synes, det er kun normalt for næsten alle former at skrive adgangskoden to gange, men ikke at vise gyldigheden af ​​de to adgangskoder viser, at det ikke overvejes seriøst.

  7. 11

    Jeg er enig i, at klientvalidering kan være en meget brugervenlig funktion. Det er dog vigtigere at sikre sig, at valideringerne faktisk giver mening.

    Du gav et glimrende eksempel på, hvordan validering kan vildlede brugere og, værre, køre dem væk fra vores websted:

    Geek Wisdom's validering af adgangskodestyrke fra betragter tZhKwnUmIss at være en svag adgangskode. Dette er ikke kun et perfekt stærkt kodeord, men det vil også fremmedgøre brugerne, fordi det giver dem det falske indtryk, at det på en eller anden måde er usikkert at logge ind på dit websted ved hjælp af denne adgangskode.

    Det ville være meget bedre (og lettere) blot at antyde brugere, at en god adgangskode er mindst seks tegn lang og skal indeholde både tal og bogstaver.

    Andre tvivlsomme valideringer inkluderer brugernavne, der har brug for en bestemt minimumslængde eller måske ikke indeholder mellemrum. Hvad er der galt med brugernavne? X, john doe, eller endda # *! §? Det kan jeg klare.

  8. 12

    Jeg er enig med dig. Nogle former ser fint ud, men det giver ikke god validering. Personlige oplysninger gives, og det er kun korrekt at tage det alvorligt ligesom enhver forretningsformular i papirform.

  9. 13
  10. 14
  11. 15

    Jeg finder det lidt morsomt, at du skriver om godheden til validering af formularvalidering i realtid, og alligevel giver din kommentarformular nederst i indlægget ingen af ​​disse ...

    Jeg er klar over, at du bruger WordPress til at blogge dine tanker på internettet, men måske er det heller ikke sådan en dårlig ide at sikre, at du praktiserer det, du forkynder. 🙂

    Et godt indlæg forresten, selvom jeg ikke nødvendigvis er enig i alt, hvad du har skrevet.

    • 16

      Doh! Du ødelagde mig, Amanda! Jeg ville ønske, jeg havde tid til at gøre en bedre formvalidering og integrere den i WordPress. Jeg kan især godt lide Adobe Spry valideringsramme og ville elske at se nogen integrere de to!

      Tak! (Og jeg sætter altid pris på, at der er flere meninger om ethvert emne).
      Doug

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.