Bar: /* Eksempel med validering af form */

2022-10-24T18:53:18Z

Eksempel med validering af form

← Ældre version		Versionen fra 24. okt. 2022, 20:53
Linje 40:		Linje 40:
	Det man typisk kan med [[javaScript]] i en form er at man kan gøre noget ved værdierne i formen inden de sendes til serveren, og man kan blokere indsendelsen af formen (nok det mest brugte af javascript til forms) - det vil man gøre ud fra en validering af formens indhold.		Det man typisk kan med [[javaScript]] i en form er at man kan gøre noget ved værdierne i formen inden de sendes til serveren, og man kan blokere indsendelsen af formen (nok det mest brugte af javascript til forms) - det vil man gøre ud fra en validering af formens indhold.

	===Eksempel med validering af form===		===Eksempel med validering af form===
	Ideen med at validere en form er at man kan tjekke om brugeren har indtastet noget fornuftigt inden der sendes til serveren.		Ideen med at validere en form er at man kan tjekke om brugeren har indtastet noget fornuftigt inden der sendes til serveren.

Bar: 1 version importeret

2022-10-24T18:18:22Z

1 version importeret

← Ældre version	Versionen fra 24. okt. 2022, 20:18
(Ingen forskel)

htx_>Bar med 3. sep. 2013, 12:28

2013-09-03T12:28:02Z

Ny side

==Det oprindelige formål med en Form==
I sin grundform var HTML ikke aktivt, så man kunne ikke ændre på noget, men man kunne indsende værdier til en server. Disse værdier skulle samles i en form og sendes med en [[submit knap]] til det der var angivet i formen.

Man kan godt have flere forskellige forms i en side, og det er kun det der ligger i den aktuelle form der sendes til serveren.

==Den grundlæggende Form==
I sin grundform kan en form se således ud:

<pre>
<form name="mening" action="test_form.php" method="get">
Skriv din mening om politik: <input type="text" name="bruger_mening" />
<input type="submit" value="Indsend din Mening" />
</form>
</pre>

Formen defineres som objekt af <form> </form>, og egenskaberne siger noget om hvad der skal ske med formen:

action angiver hvor det der sendes skal sendes hen (her er det til den server fomen ligger på, og til en side der hedder test_form.php), som skal kunne modtage det sendte.

method angiver hvilken form det sendes på (get eller post), som betyder noget for hvad man kan se i det sendte, når man sender.

[[input text]] feltet definerer det felt hvor der skal indtastes noget (her er det brugerens mening)

[[submit knap]]pen er den knap der aktiverer afsendelsen af formen.

==Mulige elementer i en form==
[[input text]]

[[input password]]

[[select]] med [[option]]s der former en [[dropdown]] menu

[[radio button]]

[[checkbox]]

[[textarea]]

==Forms og javascript==
Det man typisk kan med [[javaScript]] i en form er at man kan gøre noget ved værdierne i formen inden de sendes til serveren, og man kan blokere indsendelsen af formen (nok det mest brugte af javascript til forms) - det vil man gøre ud fra en validering af formens indhold.

===Eksempel med validering af form===
Ideen med at validere en form er at man kan tjekke om brugeren har indtastet noget fornuftigt inden der sendes til serveren.

Dette tjek kan spare serveren for en del belastning (at der ikke skal svares på henvendelser der alligevel ikke har noget formål), og det kan give en bedre brugeroplevelse (at man ikke skal udfylde en hel masse igen, hvis man har glemt et felt).

Teknikken er at man fanger [[events|eventen]] onSubmit med javascript, og returnerer false, hvis den ikke skal sendes.

Formen kan opbygges som følger:

<source lang='html4strict'>
<form action="" onSubmit="return validate(this)" method="get">
<p>Indtast en tekst på mere end 3 tegn:
<input type="text" name="tekst" /></p>
<p>
<input type="submit" value="send til denne side" />
</p>
</form>
</source>

Det der validerer (tjekker om det er i orden) formen er funktionen validate() der kan se ud som følger:

<source lang='javaScript'>
function validate(form) {
// parameteren form er sendt ved hjælp af this nede i formen, så man kan
// henvende sig til felterne ved hjælp af name-egenskaberne
var tekst = form.tekst.value;
if (tekst.length < 3) {
alert("Der skal indtastes mindst 3 tegn");
// Her sendes formen ikke
return false;
}
// Her bliver formen sendt (der er indtastet 3 eller flere tegn
return true;
}
</source>

En ekstra lille krølle i eksemplet er at man via javascript kan fange det der er sendt, ved at læse i URL-linien, og finde frem til det der er indtastet ved:

<source lang='javaScript'>
if (location.href.indexOf("?") > 0) {
var href = location.href.split("?");
var tekst = href[1].split("=");
alert("Ud af " + location.href + "kan man finde\nDet indtastede som: " + tekst[1]);
}
</source>

Eksemplet kan findes i en [[Media:js_form.zip|ZIP-fil]].

{{webcode}}

{{webdesign}}
[[kategori:javascript_input]]

Form - Versionshistorie

Bar: /* Eksempel med validering af form */

Bar: 1 version importeret

htx_>Bar med 3. sep. 2013, 12:28