Skjemavalidering: Lag et enkelt nettskjema med Dreamweaver

I den første delen av denne serien introduserte jeg ulike former for validering, inkludert beste fremgangsmåter, forskjellen mellom klientsiden og serversiden validering, typene validering inkludert separasjon og indikasjoner for påkrevde felt, riktig format og bekreftelsesfelt.

Lag en enkel form

Hvis du aldri har opprettet webskjemaer med validering, inviterer jeg deg til å følge med i denne opplæringen for å lage et enkelt skjema som vil utføre validering av flere forskjellige tekstfelt og ett tekstfeltfelt på en webside. Jeg bruker Dreamweaver og dens validere formatferd i mitt eksempel her; Imidlertid kan ethvert nettredigeringsverktøy brukes til å utføre de samme oppgavene med lignende resultater ved å bruke kodebitene som følger med. Legg merke til at JavaScript-delen kan være litt vanskeligere uten verktøyet, så jeg har inkludert den koden også på slutten av denne opplæringen. I denne enkle formen vil ingen faktiske data bli sendt inn; vi tester det bare for valideringsformål.

Lag et enkelt skjema med validering på klientsiden: Trinn for trinn

  1. Lag et nytt tomt HTML-dokument.
  2. Sett inn et skjema i websiden dokumentet (Sett inn | Skjema | Skjema) og legg til følgende kode:
  3. Klikk på skjemaet mellom åpnings- og lukkekodene, og trykk deretter Enter flere ganger for å lage flere linjer med tom plass og gå tilbake til den andre tomme linjen i skjemaet og innrykket en gang (Ctrl + Alt +).
  4. På denne linjen inne i skjematypen Navn :
  5. Trykk Shift-Enter for å opprette en linjeskift,
    , trykk deretter Enter en gang for å flytte markørinnsettingspunktet en linje ned.
  6. Sett inn et tekstfelt i skjemaet (Sett inn | Form | Tekstfelt).
  7. I Name Editor-inndata for tekstfeltet du nettopp opprettet, skriv inn NameField for Navnet der den resulterende koden er name = "NameField" i den aktuelle boksen, og klikk OK. dette legger til følgende kode:
  8. Lag to linjeskift:

  9. Plasser innsettingspunktet to linjer under tekstfeltet Navn du nettopp opprettet.
  10. Type Vennligst tast inn en e-postadresse.
  11. Opprett en linjeskift og trykk deretter Enter en gang for å flytte markørinnsettingspunktet en linje ned.
  12. Sett inn et annet tekstfelt (Sett inn | Form | Tekstfelt) og skriv inn EmailAddressField i navnefeltet for å navngi dette feltet, som legger til følgende kode:
  13. Lag to linjeskift

    .
  14. Trykk Enter to ganger for å plassere markørinnsettingspunktet to linjer under tekstfeltet E-post du nettopp opprettet.
  15. Skriv Skriv inn en kommentar: og lag en linjeskift
    .
  16. Sett inn et tekstlinjefelt i flere linjer i skjemaet (Sett inn | Form | Tekstområde) og skriv inn NameField i navnefeltet for å navngi dette feltet, med 50 kolonner og 8 rader, og legg til følgende kode:
  17. Lag to linjeskift

    .
  18. Trykk Enter to ganger for å plassere markørinnsettingspunktet to linjer under tekstområdet du nettopp opprettet.
  19. Forsikre deg om at innsettingspunktet fremdeles er inne i skjemaet, sett inn en Send-knapp (Sett inn | Form | Knapp), og velg Send for typevalget fra rullegardinmenyen, og navn den deretter SubmitButton, og legg til følgende kode
  20. Lagre dokumentet.

Hele skjemakoden skal se slik ut:

 Navn: 


 Vennligst oppgi en e-postadresse: 


 Skriv inn en kommentar: 


 Og når den er gjengitt i nettleseren, tar den enkle formen seg ut som vist i figur A : 

Legg til valideringen

Nå må vi legge til Valider skjemaatferd i taggens onSubmit-hendelse for klientsiden validering. I lekmannsbetingelser betyr dette at vi må fortelle nettforfatterverktøyet (Dreamweaver) når vi skal sjekke skjemafeltene for gyldig dataregistrering. I dette tilfellet vil vi be Dreamweaver utføre valideringen når brukeren klikker på Send-knappen i skjemaet, ved å bruke JavaScript-onSubmit-hendelsen for validering av klientsiden.

1. I Dreamweaver Design View, klikk hvor som helst i skjemaet.

2. Klikk på koden i tagvelgeren nederst til venstre i dokumentvinduet for å velge skjema. En annen måte å gjøre dette på er ved å velge skjemaet ved å klikke på den stiplete røde linjen som skisserer skjemaet i dokumentvinduet som i figur B :

3. Åpne Atferdspanelet (Vindu | Atferd) og i listen over hendelser på venstre side av panelet, velg OnSubmit fra nedtrekkslisten (se figur C; klikk for å forstørre). Det kan hende du må klikke på Vis alle hendelser-knappen i Oppførsel-panelet for å vise en liste over hendelser for skjemaet. Hvis dette er tilfelle, velger du bare på Send inn fra rullegardinlisten.

Figur C

4. Når onSubmit-hendelsen er valgt i nedtrekkslisten Hendelser, klikker du på Legg til atferd (+) -knappen og velger Valider skjema fra listen. I dialogboksen som vises, klikker du på det øverste feltet som heter NameField for å markere det.

5. Nå kan vi spesifisere valideringsparametere for dette feltet. Klikk i avkrysningsruten under Verdi: -kategorien for å gjøre dette til et obligatorisk felt.

6. Når NameField-feltet fremdeles er uthevet, klikker du på alternativknappen Alt under kategorien Godta; Dette vil tillate alle tegn å bli akseptert, som vist i figur D :

7. Du kan spesifisere valideringskriterier for de resterende feltene ved å merke hvert av de andre feltnavnene som er oppført i boksen "Navngivne felt:" og gjenta trinn 4, 5 og 6 ovenfor. Hvis du følger dette eksemplet, kan du gjøre det andre feltet (dvs. "EmailAddressField") til et obligatorisk felt som bare aksepterer en e-postadresse, og gjør det til et obligatorisk felt, og gjør det tredje feltet (dvs. "CommentField") til valgfritt felt som kan inneholde noe.

8. Når du er ferdig med å spesifisere valideringskriteriene for alle tre feltene, klikker du på "OK".

9. Lagre siden din, og forhåndsvis deretter i en nettleser.

10. Test valideringsrutinene ved å legge inn forskjellige verdier i feltene og klikke på knappen Send. Forsøk også å la et eller flere av de påkrevde feltene være tomme, og klikk på Send-knappen. Du bør få popup-feilmeldinger som beskriver hva problemet er og hvilke data som forventes for hvert av de validerte feltene.

11. La oss nå rydde opp skjemaet litt og legge til instruksjonene våre for de obligatoriske feltene med følgende uttalelse plassert før skjemaområdet: Felt merket med en stjerne (*) er påkrevd. Legg også stjernene til hvert av de nødvendige feltnavnene.

Det endelige enkle skjemaet med valideringskode inkludert JavaScript ser slik ut:

Enkelt formeksempel

Felt som er merket med stjerne (*) må fylles ut

 Navn*: 


 Vennligst oppgi en e-postadresse*: 


 Skriv inn en kommentar: 


 Det endelige enkle skjemaet med validering vises i figur E : 

Ytterligere merknader om testing og revisjon av regler

Det enkle skjemaet med validering i dette eksempelet sender faktisk ikke inn noen skjemadata siden vi la "handling" -attributtet i taggen tom (

Når valideringsreglene endelig er oppfylt og skjemainnleveringen er vellykket, vil popup-feilmeldingen opphøre, og avhengig av nettleseren din kan du støte på en "404 File Not Found" eller lignende melding når skjemaet sendes inn på grunn av tomt "handling" -attributt i taggen. På den annen side kan det se ut som om det ikke skjer noe når skjemainnleveringen er vellykket. For vårt formål indikerer imidlertid fraværet av popup-feilmelding (er) ved skjemainnlevering at skjemainnsending faktisk var vellykket, dvs. at dataene som er lagt inn i skjemaet har bestått alle skriptvalideringstestene.

Hvis du vil revidere en eksisterende valideringsregel, høyreklikker du på onSubmit - Validate Form event / oppføringslinjen i Oppførsel-panelet og velger Rediger atferd fra popup-menyen. Dialogboksen Valider skjema vises, og du kan deretter gjøre endringer i de eksisterende valideringsreglene.

I det tilfellet en enkelt webside kan inneholde flere skjemaer, må du være sikker på at du har valgt riktig felt i navngitte felt: -listen i dialogboksen Valider skjema før du bruker noen (e) valideringsregel (er). Hvis du ikke er forsiktig når du bruker valideringsregler på felt på websider som inneholder flere skjemaer, kan du tilfeldigvis legge til en valideringsregel til et annet eksisterende skjema. Måten å komme seg rundt på er å være sikker på at alle skjemaer på samme webside har unike navn for hvert felt. For navnefeltet kan det angis individuelt med name = "Form1NameField", og name = "Form2NameField", etc ...

Dreamweavers innebygde Validate Form Behaviour gir deg muligheten til raskt å sette opp valideringsregler for skjematekstfelt uten å måtte vite mye om vanskelig JavaScript-koding. Selv om dette verktøyet er utmerket, har det begrenset kapasitet og funksjonalitet, så i en fremtidig installasjon av serien vil jeg demonstrere bruken av et annet valideringsverktøy på klientsiden kjent som Check Form-utvidelsen, tilgjengelig for Dreamweaver. Det er et gratis nedlastbart plugin-verktøy som muliggjør mer avansert klientside-validering for nettformer.

© Copyright 2021 | pepebotifarra.com