18 besökare, 1 medlem och 1 Student är online nu
Loopia

webdesign och HTML

Validering av ifyllda fält
Exempel 2

Genom att kontrollera att vissa fält är ifyllda får du användaren att fylla i den information du vill ha via formuläret. Scriptet kontrollerar även att en epostadress angivits med @ i adressen. Meddelandet om fält som inte fyllts i visar alla fält som måste fyllas i.

Kontaktformulär:
Namn:


Adress:


E-postadress:


Meddelande:


 

Ett annat valideringsscript finns här »

 

Steg 1:
Lägg koden inom <HEAD>

 

<HEAD>

function checkFields() {
missinginfo = "";
if (document.kontakt.namn.value == "") {
missinginfo += "\n - Namn";
}
if (document.kontakt.adress.value == "") {
missinginfo += "\n - Adress";
}
if ((document.kontakt.email.value == "") ||
(document.kontakt.email.value.indexOf('@') == -1) ||
(document.kontakt.email.value.indexOf('.') == -1)) {
missinginfo += "\n - Epostadress";
}
if(document.kontakt.meddelande.value == "") {
missinginfo += "\n - Meddelande";
}
if (missinginfo != "") {
missinginfo ="_____________________________\n" +
"Du har inte fyllt i fälten:\n" +
missinginfo + "\n_____________________________" +
"\nFyll i de angivna fälten innan du skickar formuläret!";
alert(missinginfo);
return false;
}
else return true;
}
</script>

</HEAD>

OBS! Formulärnamn och fältnamn i fet stil kan du ändra till dina egna fältnamn. Om du vill ta bort validering av fält eller lägga till fler fält ändrar du scriptkoden och lägger till eller tar bort avsnitt som tex:

if (document.kontakt.nytt_fält.value == "") {
missinginfo += "\n - Nytt fält";

 

Steg 2:
Lägg koden inom <BODY>

 

<BODY>

<form name = "kontakt" action = "mailto:din_egen@adress.com" method = "POST" enctype = "text/plain" onSubmit="return checkFields();" action = "">

<fieldset style="width: 450px;">
<legend>Kontaktformul&auml;r: </legend>
<br>
Namn:<br>
<input name = "namn" type = "TEXT" id="namn" size="40">
<br>
<br>
Adress:<br>
<input name = "adress" type = "TEXT" id="adress" size="40">
<br>
<br>
E-postadress:<br>
<input name = "email" type = "TEXT" size="40">
<br>
<br>
Meddelande:<br>
<textarea name = "meddelande" cols = "40" rows = "5" id="textarea">
</textarea>
<br>
<br>
<input name="SUBMIT" type = "SUBMIT" value = "Skicka">
</fieldset>
</form>

</BODY>

Namnen på fälten måste vara samma som namnen i scriptet ovan. Byter du fältnamn måste även byta namn i scriptkoden.