Bygg bedre webskjemaer med JavaScript

Webskjemaer er den grunnleggende metoden for å gi datainteraksjon på nettet. Det er frustrerende for en bruker å fylle ut et skjema og støte på dårlig eller ødelagt validering - så denne veiledningen viser deg hvordan du bygger et brukervennlig HTML5-webskjema.

Quaid JS er open source-versjonen av et internt JavaScript-valideringsbibliotek, som har blitt vedlikeholdt og oppdatert i over et tiår. Den nåværende versjonen utnytter det beste av HTML5-skjemaer og utvider de innebygde funksjonene med enkle å implementere valideringsregler og brukervennlig oppførsel.

Her fortsetter jeg å klikke, men ingenting skjer. Sørg for at etikettene dine lenker til feltene ved hjelp av for-attributtet



Her fortsetter jeg å klikke, men ingenting skjer. Sørg for at etikettene dine lenker til feltene ved hjelp av for-attributtet

Starter

Sett noen strukturelle elementer på plass før du begynner på skjemaet. Jeg starter vanligvis med en tilpasset versjon av HTML5 Kjeleplate , som kommer med det essensielle Modernizr bakt i. Legg asynkroniserte referanser til jQuery og Quaid JS like før din avsluttende kroppskode. Nå er du klar til å lage et skjema. (Ikke glem å kombinere og minifisere manusene i produksjonsmiljøet.)

er Nintendo-bryteren en nettbrett
  • Last ned kildefiler for denne opplæringen
yepnope([{ load: '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', callback: function(url, result, key){ if (!window.jQuery){ yepnope('script/jquery-1.8.3.min.js'); } } } ,{load:'script/quaid-1.0.js'} ,{load:'script/quaid-au-1.0.js'} ]);

Å bygge et skjema

Få skjemaet i gang ved å legge til skjema og første feltsettelementer:

Mens du teknisk sett bør bruke en billedtekst for feltsett, synes jeg de er nesten umulige å style konsekvent. Jeg foretrekker å bruke standard HTML-overskrifter:

First Form

Legg til et blokkelement (p, li, th eller td) for å inneholde hver etikett og felt. Husk å ta med for-attributtet når du legger til en etikett; uten den kan du ikke trykke / klikke på en etikett for å fokusere på det tilknyttede feltet - avgjørende med vanskelig å klikke / trykke på alternativknapper og avkrysningsruter. Angi en passende feltstørrelse, og gi brukerne en indikasjon på hvor mye du vil at de skal angi. Hvis feltdataene skal til en database, stiller du inn makslengden til det samme som det tilsvarende databasefeltet. Dette er en standard HTML5-inngang merket med ønsket attributt:

Name

E-postfeltet bruker HTML5-typen e-post som utløser Quaid JSs e-postvalidering. Hvis du gjør din egen e-postvalidering, må du være forsiktig med en altfor enkel regex - e-postadresser er mer komplekse enn de opprinnelig ser ut:

Email

Dette feltet er uthevet og viser den tilhørende feilmeldingen under svev og fokus

Dette feltet er uthevet og viser den tilhørende feilmeldingen under svev og fokus

Mens HTML5 introduserer teleinngangstypen, gir den ingen måte å skille mellom forskjellige typer telefonnumre når det er nødvendig (for eksempel mobil og fast linje). Quaid ser bare etter en klasse for å gjøre susen.

I noen tid har konvensjonen for merking av obligatoriske felt vært å legge til en stjerne et sted nær feltet eller etiketten. Gitt at flertallet av skjemafelt er obligatoriske (hvis ikke, hvorfor inkluderer du dem?), Er det mye mer brukervennlig å merke valgfrie felt.

Varier teksten for å forklare hvorfor feltet er valgfritt, og mer detaljert, hvorfor en bruker kan trenge å fylle ut det:

Mobile Phone (if you have one)

Postnummer passer til faste mønstre, noe som gjør validering av dem ganske enkelt. Siden det ikke er noen inngangstype for postnummer, plukker Quaid JS opp riktig klasse (postnummer) for å legge til validering.

Forbedre dette ved å validere mot en database med et tilpasset Ajax-anrop. Vær imidlertid forsiktig med å stole på datakilden og la brukerne gjøre rettelser utover det grunnleggende.

Australske postnummer gir en ganske nøyaktig prediksjon av den tilknyttede staten. Ved hjelp av strålende HTML5-dataegenskaper kan vi fortelle Quaid å forutsi felt for tilstandsvalg. Siden australske postnummer bare kan være sifre, kan du bruke mønsterattributtet - ellers unngås best - for å utløse et numerisk tastatur for iOS-besøkende. Prøv også å koble til noen geolokaliseringskoder for å fylle ut adressefelt automatisk:

Postcode

Velg felt er generelt greie. Det er imidlertid verdt å merke seg at du trenger et tomt alternativ for å forhindre at du velger en standardverdi (der dette er passende):

State New South Wales Northern Territory Queensland South Australia Tasmania Victoria Western Australia

forfra og fra siden av ansiktet

Det er et utvalg av datoinngangstyper tilgjengelig i HTML5, men for øyeblikket er implementeringene i det beste vanskelig. Inntil et bedre alternativ presenterer seg, bruk en klasse for å merke datofelt og la Quaid gjøre valideringen. Datepicker-kontroller kan enkelt legges til ved å velge elementer som har samme dataklasse.

Endring av stilene til skrivebeskyttede felt gjør det enkelt å se at de ikke kan redigeres

Endring av stilene til skrivebeskyttede felt gjør det enkelt å se at de ikke kan redigeres

Gitt at jeg forventer et bestemt mønster her, har jeg brukt en plassholder for å gi brukerne en indikasjon på hva jeg forventer:

Date (if applicable)

For de av oss som bruker altfor mange timer på å jobbe med webskjemaer, er attributtet maxlength for tekstområder et av de beste tilleggene til HTML5-skjemaer. Quaid ettermonterer funksjonaliteten for nettlesere som ikke støtter den naturlig:

Description (if known)

Betingelig synlige felt er enkle å oppnå ved nok en gang å bruke dataattributter. Verdien av variabelt felt, datasynlig-felt, styrer om målfeltet kreves enten ved å bli avkrysset (for radioer og avkrysningsbokser) eller ved å matche den valgfrie verdien for data-synlig verdi.

Nødvendige felt fungerer på samme måte ved bruk av data-required-field og valgfrie data-required-value attributter tilsvarende:

Show Me Something

beste spillmus for macbook pro

Conditional

Følgende synlige og nødvendige tilstander varierer i henhold til den valgte verdien i tilstandsfeltet. I dette tilfellet vil feltsettet være synlig og feltet vil være påkrevd hvis staten Western Australia er valgt:

Conditional Value Field

Legg til regex  d * i mønsterattributtet til numeriske felt for å utløse det numeriske tastaturet i Apple iOS

Legg til regex d * i mønsterattributtet til numeriske felt for å utløse det numeriske tastaturet i Apple iOS

Utover valideringsreglene som er vist ovenfor, har Quaid JS følgende valideringsregler, som kan settes i feltets klasse:

  • Tid
  • År
  • (Positivt) Numerisk
  • (Positivt heltall
  • (Positiv) Valuta
  • Kredittkort
  • CSC (Card Security Code eller et av dets mange aliaser)

Tilpasset validering

Standardreglene vist ovenfor vil dekke de fleste valideringskrav, men du må kanskje skrive dine egne tilpassede valideringsregler:

Custom (min. 4 characters)

Tre tilpassede jQuery-metoder tilbys av Quaid JS: inline, submit og Ajax. Inline lar egendefinerte regler avfyres mens brukere fyller ut skjemaet før det sendes inn:

$('#custom').addValidation(function(el){ el.isValid = el.value.length > 3; if (!el.isValid) { el.errorMessage = 'Please enter at least four characters'; } });

Valideringsregler for innsending utsettes til skjemaet sendes inn:

hvordan tekstur i 3ds maks
$('#name').addSubmitValidation(function(el){ el.isValid = el.value !== 'Dave'; if (!el.isValid) { el.errorMessage = 'Sorry Dave, you're not allowed'; } });

Tillat folk å gjøre feil: dette e-postfeltet viser meg en feilmelding før informasjon blir skrevet inn

Tillat folk å gjøre feil: dette e-postfeltet viser meg en feilmelding før informasjon blir skrevet inn

Ajax-validering tilbyr en enkel måte å koble seg til servervalidering. I sin enkleste form kan regler legges til med bare stien til tjenesten:

$('#postcode').addServerValidation({ path: 'validation.svc/IsValidPostcode?postcode=' });

Den kallte tjenesten må sende tilbake et JSON-objekt med feilmeldingen (tom streng angir ingen feil) og ID for anropsfeltet:

validationResponse { message: '',//all clear caller: 'postcode' }

Internasjonalisering

Quaid JS lokalspesifikke deler er pakket inn i separate filer for hver region. Bare injiser landskoden etter behov for øyeblikkelig internasjonalisering:

Australsk:

isPostCode: function (p) { return /^d{4}$/.test(p); }, ... postcode: 'Postcode entered is not valid e.g. 3000',

Kanadisk:

isPostCode: function (p) { return /^[abceghjklmnprstvxyABCEGHJKLMNPRSTVXY][0-9][abceghjklmnprstvwxyzABCEGHJKLMNPRSTVWXYZ]s{0,1}[0-9][abceghjklmnprstvwxyzABCEGHJKLMNPRSTVWXYZ][0-9]$/.test(p); }, ... postcode: 'Postal code entered is not valid e.g. A9A 9A9',

Styling

For det meste er stylingformer greie, siden nettlesere gir kontroller på dine vegne. Men det er noen triks det er verdt å merke seg. Skrivebeskyttede felt skiller seg som standard ikke fra normale felt. Dette løses enkelt:

input[readonly], textarea[readonly] { background-color: #ddd; border-color: transparent; }

Plassholdere er spesielt nyttige for å gi brukerne en indikasjon på angitte mønstre

Plassholdere er spesielt nyttige for å gi brukerne en indikasjon på angitte mønstre

Etikettposisjonering er viktig for å vise hva et felt skal inneholde. Selv om det er argumenter for venstre, høyre og vertikal innretting, favoriserer jeg sterkt vertikal innretting, bare fra et mobilvennlig synspunkt. Den enkleste måten å oppnå dette på er å endre visningsegenskapen til etikettelementene:

label { display: block; }

Så det ender denne opplæringen - jeg håper den er gitt en nyttig guide for å lage klarere, mer brukervennlige HTML5-skjemaer.

Ord: Chris Lienert

Denne artikkelen dukket opprinnelig opp i .net magasin utgave 239

Likte dette? Les disse!

Noen spørsmål? Spør bort i kommentarene!