Hoe Basic JavaScript Validatie uit te voeren - dummies

U kunt basistoleratie doen met JavaScript voor verschillende invoertypen. Deze eerste oefening stelt de HTML in voor het webformulier. Zodra u deze oefening hebt voltooid, wordt JavaScript-validatie voor een formulier uitgevoerd.

1. Open uw teksteditor en maak een nieuw leeg bestand.

2. Plaats in het bestand de volgende HTML:

   Een formulier Gebruikersinformatie Naam: * Naam is verplicht 
   
   Plaats: 
   Staat: Alabama Californië Colorado Florida Illinois New Jersey New York Wisconsin > ZIP: 
   E-mail adres: * E-mail is vereist 
   Telefoonnummer: Formaat: xxx-xxx-xxxx 
   Nummer Type: Werk Thuis Kies een optie 
   Wachtwoord: * Wachtwoord vereist 
   Bevestig wachtwoord: * Wachtwoorden komen niet overeen 
   Sla het bestand op als formulier. php in de hoofdmap van uw document. 
   

3. localhost
4. / form. php. De HTML ziet er behoorlijk slecht uit, met niet-uitgelijnde formuliervelden en fouten die worden weergegeven. Je kunt dat oplossen met CSS.

   

   Maak een nieuw tekstbestand in uw editor en voer de volgende CSS:

5. formulierveldset {display: inline-block;} in. radioButton {float: none; weergave: inline; margin-right: 0. 1em; width: 2em;} form label {width: 8em; margin-right: 1em; zweven: links; text-align: right; display: block;} form input {width: 15em;} #submit {margin-top: 2em; zweven: rechts;}. errorClass {background-color: # CC6666;} #errorDiv {col or: red;}. errorFeedback {visibility: hidden;}

   Sla het bestand op als formulier. css in de hoofdmap van uw document.
   

6. Er is al naar dit bestand verwezen in de HTML die u in stap 2 hebt gemaakt, dus er zijn geen andere wijzigingen in dat bestand nodig.

   Laad het formulier opnieuw. php-bestand in uw browser.

7. Met de HTML en CSS op zijn plaats is het tijd om wat JavaScript toe te voegen.

   

   Opmerking: U bouwt de validatiecode verderop in dit hoofdstuk. Voor nu voeg je gewoon een standaard JavaScript-bestand toe.

   Maak een nieuw tekstbestand in uw editor.

8. Plaats het volgende JavaScript in het bestand.

9. $ (document). ready (function () {alert ("hallo");});

   Sla het bestand op als formulier. js in de hoofdmap van uw document.
   

10. Formulier herladen. php in uw webbrowser.

11. Klik op OK om het dialoogvenster te sluiten.

    

12. Hoewel het waarschuwingsvenster zelf niets nieuws is, bewijst dit dat u de HTML en JavaScript correct hebt verbonden voor deze oefening. Vanaf hier kunt u werken aan het toevoegen van JavaScript-validatie aan het formulier. Voordat u dit doet, is het misschien handig om een ​​deel van de HTML en CSS die u hebt gemaakt op te splitsen.