En introduksjon til formuleringsvalideringsmetoder

Som de fleste av dere allerede vet, er skjemaer en flott måte å samle informasjon fra de besøkende og la dem sende inn informasjon til webserveren din for behandling på nettstedet ditt. Dette inkluderer vanligvis en databaseforbindelse for å tjene, behandle og opprette poster for å lagre informasjonen. Skjemaer lar også kundene dine samhandle med nettstedet ditt, for eksempel ved å søke etter spesifikk informasjon, eller ved å sende inn kommentarer til en spesifikk avdeling eller e-postadresse. Ofte er det tidspunkter der du vil forsikre deg om at kunder ikke lar spesifikke skjemafelt være blanke, eller du vil begrense et felt til en viss type inndata, for eksempel tegn, nummer, e-postadresse, postnummer, telefonnummer, eller en liste med forhåndsinnstilte alternativer fra en rullegardinmeny.

Denne artikkelen er del av en serie med flere deler om utforsking av forskjellige metodevalueringsmetoder, feilmeldinger, tilbakemeldingsteknikker og tilnærminger for implementering av nettstedets skjemavalidering.

I en perfekt verden vil nettbesøkende legge inn riktig og nødvendig informasjon og fullføre oppgaven. Imidlertid gjør mennesker i den virkelige verden ofte feil eller misbruker prosessen, og det er her validering av form ser ut. Det endelige sluttresultatet er å sikre at besøkende gir riktig og riktig formatert informasjon for å fullføre skjemainnleveringen.

Valideringsskriptene på serversiden er ikke avhengige av eller kjemper med JavaScript-støtte i brukerens nettleser; følgelig påvirkes de ikke av tilstedeværelsen eller fraværet av JavaScript-støtte i brukerens nettleser. Med validering på serversiden blir informasjon sendt til serveren og validert ved hjelp av et av mange språk på serversiden. Hvis valideringen mislykkes, sendes svarmeldingen deretter tilbake til klienten, og siden som inneholder webskjemaet blir oppdatert og en tilbakemeldingsmelding vises. Dette er en sikrere metode og fungerer selv om JavaScript er slått av i nettleseren og det ikke lett blir forbigått av brukere med ondskapsfull intensjon. Ulempen med validering på serversiden er at brukere må fylle ut informasjonen uten å få svar, bare til de klikker på send-knappen, og dette resulterer vanligvis i en langsommere samlet responstid for brukeropplevelsen.

Et unntak fra typisk validering på serversiden er bruken av Ajax-samtaler til serveren ved bruk av jQuery; som brukeren skriver inn informasjonen, gir den øyeblikkelig tilbakemelding om skjemavalidering. Ved å bruke Ajax i forbindelse med validering av klientsiden, kan det i forkant validere skjemaer ved å bruke de samme klientsideneglene ved innsendelse av skjema.

Validering av klientsiden ved hjelp av JavaScript gir en samlet bedre sluttbrukeropplevelse siden brukerinngangen kan valideres når den er skrevet, og sender øyeblikkelig tilbakemeldingssvar med en mislykket bekreftelse. En ulempe ved validering av klientsiden er at noen besøkende har JavaScript-støtte deaktivert i nettleseren deres enten med vilje eller uvitende. Slike brukere kan omgå JavaScript-valideringsrutiner og sende inn et skjema uavhengig av om det tilfredsstiller valideringsreglene.

For å forhindre at "søppel" -sendinger kommer inn fra besøkende, vil webapplikasjonsutviklere vanligvis utfylle JavaScript-validering fra klientsiden med valideringsskriptene på serversiden. De fleste webapplikasjoner benytter i dag både validering av klientsiden med JavaScript og validering på serversiden, for eksempel ColdFusion- og Perl / CGI-valideringsrutiner for å oppdage problemer med brukeroppførte skjemadata og dermed forhindre innsending av upassende data.

Det er flere typer validering som du kan utføre, og disse faller vanligvis inn i en av tre kategorier, inkludert nødvendig informasjon, riktig format og bekreftelse.

Det første settet med informasjon som bør valideres, er den nødvendige informasjonen, og dette indikeres vanligvis enten med en stjerne (*) eller en "påkrevd" uttalelse ved siden av feltet eller deklarert før skjemaet. Med mindre alle felt er påkrevd, bør en slik indikasjon gjøres for å gi de besøkende riktig retning for å fylle ut skjemafeltene.

For universell utforming og tilgang, skal de nødvendige dataregistreringsfeltene skilles tydelig og konsekvent fra valgfrie dataregistreringsfelt. Den klassifiserte standarden skal inneholde følgende:

  • Oppgi en stjerne (*) foran etiketten for alle obligatoriske felt, og ta med en setning som går foran begynnelsen av dataregistreringsskjemaet, for eksempel "Et felt med en stjerne (*) før det er et påkrevd felt."
  • Oppgi ordet "påkrevd" foran eller under etiketten for hvert obligatorisk felt. I tillegg skal en uttalelse som indikerer de påkrevde feltene, gis i begynnelsen av dataregistreringsskjemaet. For eksempel er "Alle obligatoriske felt angitt med ordet" påkrevd "sammen med etiketten.
  • Skill valgfrie og påkrevde felt når det er passende og praktisk. Alle grupperinger skal merkes tilsvarende "Påkrevd" eller "Valgfritt" for å hjelpe sluttbrukeren.
I samsvar med avsnitt 508 (Web Compliance Framework, Inst. For helse og menneskelige tjenester), er det ikke nok å bruke farge eller fet skrift for vektlegging av obligatoriske felt for å skille dem fra valgfrie felt. Fargeblinde brukere eller de som bruker skjermlesere, vil ikke skille mellom påkrevde eller valgfrie dataregistreringsfelt basert på farger eller fet indikasjoner. Eksemplet i figur A viser hvordan obligatoriske felt er indikert med en stjerne (*).

Figur A

Riktig format validerer for å sikre at URL-er, telefonnumre, e-postadresser, nummer, passord og annen informasjon legges inn i den akseptable syntakskonfigurasjonen. Selv om det er fristende å begrense formatet og syntaks for spesifikke datatyper, er det til tider god praksis å tillate en rekke formater som lar applikasjonen tolke dataene, og bruker derfor et tilgivende designmønster for brukerinndata. I eksemplet vist på figur B fra iStockphoto.com bekrefter registreringsskjemaet e-postadressen og passordet, og gir en feilmelding og forslag for å rette oppføringene med umiddelbar tilbakemelding før du sender inn.

Figur B

Bekreftelsesfelt sørger for at brukere bekrefter dataene som er lagt inn med to felt som er gitt for den samme informasjonen, for eksempel passord og e-postadresser krever vanligvis en dobbel oppføring for å bekrefte riktigheten. Vanligvis plasseres disse dupliserte feltene rett ved siden av hverandre og er tydelig merket slik at brukeren kjenner til hensikten deres foran. Når de to oppføringene samsvarer, sendes skjemaet med hell; Hvis ikke, bør en feilmelding indikere at de to oppføringene er forskjellige. Et godt eksempel på bekreftelse av felt vises i figur C fra Angies liste.

Figur C

De fleste webforfatterverktøy har vanligvis kraftige innebygde funksjoner som kan hjelpe deg med å lage valideringsfelt i et skjema som sikrer at feltene er riktig utfylt av online brukere. I Dreamweavers Validate Form Behaviour bruker den for eksempel JavaScript for å håndheve reglene du angir for et bestemt skjema for webdokumenter. Når en bruker av nettstedet prøver å sende inn et skjema som inneholder blanke felt og / eller har lagt inn upassende data, vil de motta et popup-vindu som viser en feilmelding som indikerer det spesifikke problemet, noe som resulterer i kansellering eller midlertidig stans av skjemaets innsending til problemet er rettet. Når brukeren har foretatt korrigeringene og valideringsregelen (e) som du opprettet, er oppfylt ved å bruke valideringsatferden, vil skjemaet bli sendt inn.

De fleste innebygde valideringsverktøy, inkludert Dreamweavers Validate Form Behaviour, kan bare validere innholdet i tekstfelt og kan ikke sjekke at de riktige alternativknappene, avkrysningsrommene, rullegardinlistene osv. Er valgt av brukeren. Det du kan gjøre er å bruke Valider skjemaatferd for å sikre at tekstfelt oppfyller følgende kriterier og betingelser:

  • Inneholder bare tall. Du kan avvise skjemainnlevering hvis et tekstfelt inneholder noe annet enn sifre.
  • Har en numerisk verdi innenfor et område. Du kan avvise skjemainnlevering hvis nummeret i et tekstfelt er utenfor det angitte området.
  • Oppgi en e-postadresse. Det er imidlertid viktig å merke seg at validering vanligvis bare sjekker om det er et @ -symbol i e-postadressen, og ikke sjekker om det er en riktig konstruert e-postadresse som postbeskyttet _name.com
  • Inneholder noe. Du kan avvise skjemainnlevering hvis det ikke er informasjon i tekstfeltet.

I neste segment vil jeg demonstrere å lage et enkelt skjema som vil utføre validering av flere forskjellige tekstfelt på en web-dokumentside ved å bruke Dreamweaver i eksemplene.

Fremtidige segmenter vil dykke dypere i metodevalideringskodingsmetoder, samt gjennomgå valideringsfeedback, validering ved innsending, sanntidsvalidering, legge til nyttige tips, dynamiske tips, maske og formatere brukerinnganger og legge til captcha-kode for å sikre menneskelig grensesnitt. Deretter vil jeg sette sammen en liste over formvalideringsressurser. Gi meg beskjed om det er spesifikke spørsmål om formvalidering som du har i diskusjonsområdet nedenfor.

© Copyright 2020 | mobilegn.com