Hur man utför grundläggande JavaScript-validering - dummies

Du kan göra som grundläggande validering med hjälp av JavaScript för en mängd olika typer av inmatningar. Denna första övning skapar HTML för webbformuläret. När du har slutfört denna övning har du JavaScript-validering gjord för en blankett.

1. Öppna din textredigerare och skapa en ny tom fil.

2. Placera följande HTML:

   En blankett Användarinformation Namn: * Namn krävs 
   
   Stad: 
   Stat: Alabama Kalifornien Colorado Florida Illinois New Jersey New York Wisconsin > Postnummer: 
   E-postadress: * E-post krävs * Telefonnummer: Format: xxx-xxx-xxxx 
   Nummertyp: Arbete Hem Var god välj ett alternativ 
   Lösenord: * Lösenord krävs 
   Verifiera lösenord: * Lösenorden matchar inte 
   Spara filen som formulär. php i din dokumentrots. 
   
   
   
   
   
   
    
   
   

3. lokalvärd

   / form. php.
4. HTML ser ganska dåligt ut, med felformade formulärfält och fel som visas. Du kan fixa det med CSS. Skapa en ny textfil i din redigerare och ange följande CSS:

   

   formfältet {display: inline-block;}. radioButton {float: none; display: inline; marginal-höger: 0. 1em; bredd: 2em;} formuläretikett {width: 8em; marginal-höger: 1em; flyta till vänster; textjustera: höger; display: block;} form input {width: 15em;} #submit {margin-top: 2em; float: right;}. errorClass {background-color: # CC6666;} #errorDiv {col eller: red;}. errorFeedback {visibility: hidden;}

5. Spara filen som formulär. css i din dokumentrots.

6. Den här filen refererades redan i HTML-filen som du skapade i steg 2, så det behövs inga andra ändringar för den filen.

   Ladda om formuläret. php-filen i din webbläsare.

   Med HTML och CSS på plats är det dags att lägga till lite JavaScript.

7. Obs!

   

   Du bygger valideringskoden senare i det här kapitlet. För tillfället lägger du bara till en grundläggande JavaScript-fil.

   Skapa en ny textfil i din redaktör.
   Placera följande JavaScript i filen.

8. $ (dokument). redo (funktion () {alert ("hej");});

9. Spara filen som formulär. js i din dokumentrots.

   Uppdatera formulär. php i din webbläsare.
   

10. Klicka på OK för att avvisa dialogrutan.

11. Medan varningsdialogrutan inte är ny, bevisar du att du har anslutit HTML och JavaScript korrekt för den här övningen. Härifrån kan du arbeta med att lägga till JavaScript-validering i formuläret. Innan du gör det kan det vara bra att bryta ner några av HTML och CSS som du har skapat.