Problemer med IE, mht validering af form!
Hey Eksperter.Er for nyligt begyndt at lære mig selv JavaScript, da jeg savnede nogle af de JavaScript funktioner jeg har set på andre sider, koder normalt i ASP.
Mit problem er at jeg gerne vil lave det således at JavaScript skal tjekke <input> felter i en formular, samtidig med at brugeren skriver i feltet.
Efter lidt roden rundt med de forskellige events, fik jeg det til at virke perfekt i FireFox, men så prøvede jeg lige i Internet Explorer, og der virker det ikke efter hensigten.
Problembeskrivelse:
FireFox: Her får brugeren en beskrivelse af hvilke kriterier der skal udfyldes for det felt de skriver i, beskrivelse skifter til 'OK' når kriterierne er opfyldt. Og først når alle felter er udfyldt korrekt, kan brugeren trykke på submit knappen (enable / disable)
Internet Explorer: Her kommer der ingen beskrivelse af kriterier, eller 'OK' når kriterierne er opfyldt, men enable/disable af submitknap virker som det skal.
JavaScript kode:
// Function to set focus on a field
function setFocus(field_id) {
document.getElementById(field_id).focus();
}
// Function to write text instantly
function write_text_instant(msg,text) {
document.getElementById(msg).innerHTML = text;
}
// Function to disable element
function disable(element_id) {
document.getElementById(element_id).disabled = true;
}
// Function to enable element
function enable(element_id) {
document.getElementById(element_id).disabled = false;
}
// Function to disable / enable element
function ena_dis(element_id, field_id) {
var field_value = document.getElementById(field_id).value;
name = new Boolean();
adress = new Boolean();
if (field_id == "name") {
if (field_value.length < 5) {
disable(element_id);
write_text_instant('name_msg_instant','<font style="color:#FF0000;">Must be at least 5 letters (including space)</font>');
}
else {
write_text_instant('name_msg_instant','<font style="color:#00FF00">OK</font>');
name = true;
}
}
if (field_id == "adress") {
if (field_value.length < 6) {
disable(element_id);
write_text_instant('adress_msg_instant','<font style="color:#FF0000;">Must be at least 6 letters</font>');
}
else {
write_text_instant('adress_msg_instant','<font style="color:#00FF00">OK</font>');
adress = true;
}
}
if (field_id == "zipcode") {
if (field_value.length != 4) {
disable(element_id);
write_text_instant('zipcode_msg_instant','<font style="color:#FF0000;">Must be 4 digits</font>');
}
else {;
write_text_instant('zipcode_msg_instant','<font style="color:#00FF00">OK</font>');
if ((name = true) && (adress = true)) {
enable('submit');
}
}
}
}
HTML kode:
<body onload="setFocus('name');">
<form method="get">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
Name:
</td>
<td width="10"></td>
<td>
<input type="text" name="name" id="name" size="30"
onfocus="ena_dis('submit','name');"
onblur="ena_dis('submit','name');"
onkeydown="ena_dis('submit','name');"
onkeypress="ena_dis('submit','name');"
onkeyup="ena_dis('submit','name');" />
<msg id="name_msg_instant" style="color:#FF0000;"> </msg>
</td>
</tr><tr><td height="5"></td></tr><tr>
<td>
Adress:
</td>
<td width="10"></td>
<td>
<input type="text" name="adress" id="adress" size="30"
onfocus="ena_dis('submit','adress');"
onblur="ena_dis('submit','adress');"
onkeydown="ena_dis('submit','adress');"
onkeypress="ena_dis('submit','adress');"
onkeyup="ena_dis('submit','adress');" />
<msg id="adress_msg_instant" style="color:#FF0000;"> </msg>
</td>
</tr><tr><td height="5"></td></tr><tr>
<td>
Zipcode:
</td>
<td width="10"></td>
<td>
<input type="text" name="zipcode" id="zipcode" size="30"
onfocus="ena_dis('submit','zipcode');"
onblur="ena_dis('submit','zipcode');"
onkeydown="ena_dis('submit','zipcode');"
onkeypress="ena_dis('submit','zipcode');"
onkeyup="ena_dis('submit','zipcode');" />
<msg id="zipcode_msg_instant" style="color:#FF0000;"> </msg>
</td>
</tr><tr><td height="5"></td></tr><tr>
<td colspan="2"></td>
<td>
<input type="submit" id="submit" value="Submit" />
<input type="reset" id="reset" value="Reset and Reload" onclick="java script:window.location.reload();" />
</td>
</tr>
</table>
</form>
</body>
