JavaScript

Granska formulär

Formulär är ett sätt för programmeraren att hämta in information från användaren. Formuläret är helt enkelt en elektronisk blankett som läggs ut på webbsidan.

Vi ska börja på en inloggningssida för speciella delar av Nikes hemsida. På dessa speciella delar ska det finnas lite information som bara den som har rätt användarnamn och lösenord kan komma åt. T ex ska inte obehöriga personer kunna se Nikes telefon- och idnummer. För att ta hand om ett formulär behövs andra tekniker än JavaScript och senare delar av kursen kommer att titta på detta. Men för att granska att formuläret är rätt ifyllt är JavaScript ett fullt tillräckligt verktyg.

För att hitta ett formulär på din HTML-sida är det bra om formuläret är namngivet med t ex NAME="namn". På det här sättet är det lätt att komma åt objektet för formuläret via document. Vi ska här skapa ett enkelt formulär och granska några av de värden som användaren skriver in.

Här är formuläret (som i HTML-lektionen).

<FORM NAME="login" METHOD="POST" ACTION="#">     

<TABLE>

<TR>

	<TD> 

		Användarnamn

	</TD>



	<TD>

		<INPUT TYPE="text" NAME="username" SIZE="32">

	</TD>

</TR>



<TR>

	<TD> 

		Lösenord

	</TD>



	<TD>

		<INPUT TYPE="password" NAME="password" SIZE="32">

	</TD>

</TR>



<TR>

	<TD COLSPAN="2">

		<INPUT TYPE="submit" NAME="login" VALUE="Logga in" 

				  onClick="return checkForm()">

	</TD>

</TR>

</TABLE>

</FORM>

I den nedersta tabellcellen hittar vi koden för den knapp som skickar iväg formuläret. Elementet

• Om sanningsvärdet är sant skickas formuläret iväg som vanligt.
• Om värdet är falskt avbryts skickningen och anändaren får chansen att rätta sina ifyllda uppgifter.

Nu ska vi titta på funktionen i JavaScript för att kontrollera de inskrivna raderna.

<script type="text/javascript">



function checkForm() 

{

var username = document.login.username.value;

if (username.length < 4){

	alert('Användarnamnet måste innehålla minst 4 tecken');

	return false;

}



var password = document.login.password.value;

if (password.length < 4){

	alert('Lösenordet måste innehålla minst 4 tecken');

	return false;

	}



if (password == username){

	alert('Lösenord och användarnamn får inte vara samma!');

	return false;

	}



return true;



}



</script>

Det som händer nu är att så fort användaren klickar på Logga in kommer funktionen checkForm som vi skrivit att anropas. Vi använder oss av funktionen checkForm() och vill att den ska returnera TRUE om formuläret är ok och FALSE i annat fall.

Vi tittar lite närmare på koden. Tre kontroller sker och varje kontroll tas omhand i en egen if-sats. Före den första if-satsen tar vi fram det som användaren har skrivit in genom att använda oss av objektet login som är själva formuläret. Dettta får vi tag i genom att gå via objektet document. username respektive password är INPUT-objekten och de har egenskapen value som är det som användaren skriver in.

Vi hämtar alltså ut detta värde och lagrar det i de lokala variablerna username och password.

Villkoren på if-satserna är uppfyllda då något är fel med användarens inmatning. Det som händer om något är fel är att vi returnerar falskt. När en funktion returnerar ett värde hoppar programmet samtidigt ur funktionen och utför inget mer kod inne i funktionen. Programmet fortsätter istället på det ställe som funktionsanropet kom ifån. I varje if-sats finns också funktionen alert() inlagd och denna visar en liten ruta med text för användaren vad som var fel med inmatningen.

Användaren får göra om inmatningen tills formuläret ser OK ut. Då kommer värdet TRUE att returneras och formuläret skickas till filen inloggad.html som är tänkt att kolla användarnamn och lösenord mot en databas. Eftersom vi nu endast kör skriptet på klientsidan finns inte tillgång till databaser och vi skriver endast ut lite text på skärmen. Prova formuläret nedan.

Om du vill prova formuläret på din egen dator måste du också skapa filen inloggad.html. Eventuellt kommer webbläsaren i alla fall meddela dig att ett fel har uppstått. Detta beror på att HTML-filen som formuläret skickar data till inte har någon kod för att ta imot denna data. Vi kommer till detta senare i kursen, så det är inget du behöver oroa dig för nu.

Dessutom går det att lägga in en dialogruta där användaren ges möjlighet att ångra ivägskickandet av formuläret. Ibland råkar man som användare komma åt t ex Enter på tangentbordet utan vetskap att detta då skickar iväg ett visst formulär. Funktionen confirm() hjälper oss med detta och som argument till funktionen skickar vi det meddelande som ska visas för användaren. I vårt fall skickar vi med texten "Vill du skicka formuläret?". Användaren får upp denna fråga och kan svara Ja eller Avbryt. Vid Ja skickas formuläret som vanligt och vid Avbryt lämnas formuläret som det är utan att skickas.

<script type="text/javascript">



function checkForm() 

{

var username  = document.login.username.value;

if (username.length < 4){

	alert('Användarnamnet måste innehålla minst 4 tecken');

	return false;

}



var password  = document.login.password.value;

if (password.length < 4){

	alert('Lösenordet måste innehålla minst 4 tecken');

	return false;

	}



if (password  == username){

	alert('Lösenord och användarnamn får inte vara samma!');

	return false;

	}



if (confirm('Vill du skicka formuläret?'))

	return true;



return false;

}





</script>

Koden kollar som tidigare om en korrekt inmatning har gjorts av användaren. Om den var korrekt kommer programmet att hamna vid koden :

if (confirm('Vill du skicka formuläret?'))

	return true;

och returnerar istället värdet FALSE. Precis som innan betyder ett falskt returvärde att formuläret inte ska skickas vidare.

Det är nu dags att prova formuläret igen!

I PHP-delen kommer vi att ta fram den här koden och använda den när vi skapar en sida för inloggning. Några saker i koden kommer att ändras på men i stort är det här vad vi behöver på klient-sidan.