validering = ok skriv at valideringen gik fint
Min side virker fint og valideringen også, men når siden er færdig med at validere så kunne jeg godt tænke mig at der blev skrevet en besked til brugeren, kan det lade sig gøre?Jeg er rimelig ny i JavaScript!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Skole opgave 2.2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" language="javascript">
////////////////////Forklaring///////////////////////////
//En række forskellige funktioner som kaldes enkeltvis.//
/////////////////////////////////////////////////////////
//funktion der tjekker at man har indtastet en gyldig e-mail adresse der ligner navn@udbyder.dk
//her skal formnavn og feltnavn tilpasses
function checkEmail() {
var strEmail=document.form.email.value;
var filter=/^.+@.+..{2,3}$/;
if (filter.test(strEmail)) {
return true;
} else {
alert("Indtast venligst en gyldig E-mail adresse!");
document.form.email.focus();
return false;
}
} //funktion slut
//funktion der tjekker at brugernavn indtastet
function checkBruger() {
var strNavn=document.form.navn.value;
if (strNavn != '') {
return true;
} else {
alert("Du skal indtaste dit brugernavn!");
document.form.navn.focus();
return false;
}
} //funktion slut
//funktion der tjekker at man har valgt en værdi i en selectbox.
//Dette kræver at der er en option der ser således ud: <option value="0" SELECTED>Default værdi</option>
function checkProdukt() {
if (document.form.produkt.selectedIndex==0) {
alert("Du skal vælge et produkt!")
document.form.produkt.focus();
return false;
} else {
return true;
}
} //funktion slut
//funktion der tjekker at man har valgt en værdi i en selectbox.
//Dette kræver at der er en option der ser således ud: <option value="0" SELECTED>Default værdi</option>
function checkSize() {
if (document.form.size.selectedIndex==0) {
alert("Du skal vælge tøj størrelse!")
document.form.size.focus();
return false;
} else {
return true;
}
} //funktion slut
//funktion der tjekker at man har valgt en værdi i en selectbox.
//Dette kræver at der er en option der ser således ud: <option value="0" SELECTED>Default værdi</option>
function checkColor() {
if (document.form.color.selectedIndex==0) {
alert("Du skal vælge et farve område!")
document.form.color.focus();
return false;
} else {
return true;
}
} //funktion slut
//funktion der kører alle funktione igennem
function Validate() {
if ( ! checkEmail() ) return false;
if ( ! checkBruger() ) return false;
if ( ! checkProdukt() ) return false;
if ( ! checkSize() ) return false;
if ( ! checkColor() ) return false;
return true;
}
</script>
</head>
<body id="popup">
<form name="form" action="#" target="_parent" method="post" onsubmit="return Validate();">
<table width="400" border="0" cellpadding="0" cellspacing="0" height="300">
<tr>
<td class="rammeL"> </td>
<td class="main"> </td>
<td class="rammeR"> </td>
</tr>
<tr>
<td class="rammeL"> </td>
<td rowspan="3" class="main"><table width="100%" border="0">
<tr>
<td>E-mail</td>
<td><input name="email" type="text" id="name" size="45" maxlength="50" /></td>
</tr>
<tr>
<td>Navn</td>
<td><input name="navn" type="text" id="name" size="45" maxlength="50" /></td>
</tr>
<tr>
<td>Produkt</td>
<td><select name="produkt" size="1">
<option value="0" selected>Vælg produkt</option>
<option value="Overtøj">Overtøj </option>
<option value="Bukser (Jeans)">Bukser (Jeans)</option>
<option value="Bukser (Fløjlsbuks)">Bukser (Fløjlsbuks)</option>
<option value="Bukser (Lærred)">Bukser (Lærred)</option>
<option value="Bukser (Lærred)">Bukser (Lærred)</option>
<option value="6">Skjorter (lange ærmer)</option>
<option value="7">T-shirts </option>
<option value="8">Cardigans </option>
<option value="9">Pullover </option>
<option value="10">Sweatshirts</option>
<option value="11">Homewear</option>
<option value="12">Fodtøj </option>
</select></td>
</tr>
<tr>
<td>Størrelse</td>
<td><select name="size" size="1">
<option value="0" selected>Størrelse</option>
<option value="1">XXXXL</option>
<option value="2">XXXL</option>
<option value="3">XXL</option>
<option value="4">XL</option>
<option value="5">L</option>
<option value="6">M</option>
<option value="7">S</option>
<option value="8">XS</option>
</select></td>
</tr>
<tr>
<td>Farve</td>
<td><select name="color" size="1">
<option value="0" selected>Vælg farver</option>
<option value="1">Alle farver</option>
<option value="2">Lyse farver</option>
<option value="3">Pastel farver</option>
<option value="4">Sand farver</option>
<option value="5">Navy farver</option>
<option value="6">Rust farver</option>
<option value="7">Army farver</option>
<option value="8">Khaki farver</option>
<option value="9">Hvid</option>
<option value="10">Sort</option>
</select></td>
</tr>
<tr>
<td> </td>
<td class="menu"><input name="Submit" type="submit" value="Send" />
<input type="Reset" /></td>
</tr>
</table></td>
<td class="rammeR"> </td>
</tr>
<tr>
<td class="rammeL"> </td>
<td class="rammeR"> </td>
</tr>
<tr>
<td class="rammeL"> </td>
<td class="rammeR"> </td>
</tr>
<tr>
<td class="rammeL"> </td>
<td class="main"> </td>
<td class="rammeR"> </td>
</tr>
<tr>
<td class="rammeL"> </td>
<td class="menu"><a href="#" onClick="window.close()">[Luk Vindue]</a></td>
<td class="rammeR"> </td>
</tr>
</table>
</form>
</body>
</html>
