Kligham
Gebruiker
- Lid geworden
- 7 jan 2009
- Berichten
- 389
Hallo,
Ik ben bezig met het uittesten van een aantal dingskes. Nu wil ik graag hetvolgende doen, maar weet niet echt hoe ik het moet doen. Er staan in mijn form 4 velden. Nu zou ik graag hebben dat er voor dat er maar iets gecontroleerd wordt (dus eigenlijk vanaf dat het script opgeroepen wordt) er naast elk vakje een icoontje tevoorschijn komt. (een neutraal icoon dat dan nadat het gecontroleerd wordt vervangen moet worden door mijn V-tje of X-je)
Dit zou moeten gebeuren door javascript, niet door PHP aangezien als het javascript geblokkeerd wordt, mogen die neutrale icoontjes ook niet weergegeven worden.
-> kan iemand mij vertellen of een hint geven hoe ik dit moet aanpakken.
Zo ziet mijn test script eruit:
Een foto van hoe mijn form validation eruitziet: zie upgeloade foto test (hieronder)
Hier een foto hoe het er in het begin zou moeten uitzien: zie upgeloade foto test2 (hieronder)
=> Hoe krijg ik dit nu voor elkaar
Ik ben bezig met het uittesten van een aantal dingskes. Nu wil ik graag hetvolgende doen, maar weet niet echt hoe ik het moet doen. Er staan in mijn form 4 velden. Nu zou ik graag hebben dat er voor dat er maar iets gecontroleerd wordt (dus eigenlijk vanaf dat het script opgeroepen wordt) er naast elk vakje een icoontje tevoorschijn komt. (een neutraal icoon dat dan nadat het gecontroleerd wordt vervangen moet worden door mijn V-tje of X-je)
Dit zou moeten gebeuren door javascript, niet door PHP aangezien als het javascript geblokkeerd wordt, mogen die neutrale icoontjes ook niet weergegeven worden.
-> kan iemand mij vertellen of een hint geven hoe ik dit moet aanpakken.
Zo ziet mijn test script eruit:
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Form validation</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkField(field)
{
var icon_okay = '<img src="images/vinkje.png" align="absmiddle">';
var icon_error = '<img src="images/icon_error.gif" align="absmiddle">';
// Gebruikersnaam
if(field.id == 'gebruikersnaam')
{
if(field.value.length < 2){
var display = icon_error + ' <font color="red">Uw gebruikersnaam moet uit minimaal 2 tekens bestaan.</font>';
} else if (field.value.length > 7){
var display = icon_error + ' <font color="red">Uw gebruikersnaam mag niet meer dan 16 tekens bevatten.</font>';
} else {
var display = icon_okay;
}
}
// E-MAIL
if(field.id == 'email')
{
// http://javascript.about.com/library/blre.htm
emailRe = /^[a-zA-Z0-9]$/
if (!emailRe.test(field.value))
{
var display = icon_error + ' <font color="red">display! You should enter a valid e-mail address.</font>';
}
else
{
var display = icon_okay;
}
}
// MESSAGE
if(field.id == 'message')
{
if(field.value.length < 20)
{
var display = icon_error + ' <font color="red">display! The message should have at least 20 characters.</font>';
}
else
{
var display = icon_okay;
}
}
document.getElementById(field.id + "_status").innerHTML = display;
return false;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<form name="form" action="javascript:alert('success!');">
<table width="804" border="0">
<tr>
<td width="324">Gebruikersnaam:<br />
<INPUT id="gebruikersnaam" size="43" type="text" name="gebruikersnaam" onChange="JavaScript: checkField(document.form.gebruikersnaam);"></td>
<td width="470"><div id="gebruikersnaam_status"></div></td>
</tr>
<tr>
<td>E-Mail:<br />
<INPUT size="43" type="text" id="email" name="email" onChange="JavaScript: checkField(document.form.email);"></td>
<td valign='bottom'><div id="email_status"></div></td>
</tr>
<tr>
<td>Subject (optional):<br />
<INPUT size="43" type="text" id="subject" name="subject"></td>
<td valign='bottom'> </td>
</tr>
<tr>
<td>Message:<br />
<TEXTAREA ID="message" NAME="message" ROWS="8" COLS="33" onChange="JavaScript: checkField(document.form.message);"></TEXTAREA></td>
<td valign='top'><div style="margin-top: 20px;" id="message_status"></div></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
</table>
</form>
</BODY>
</HTML>Een foto van hoe mijn form validation eruitziet: zie upgeloade foto test (hieronder)
Hier een foto hoe het er in het begin zou moeten uitzien: zie upgeloade foto test2 (hieronder)
=> Hoe krijg ik dit nu voor elkaar
Bijlagen
Laatst bewerkt:
