javascript validation
Ik heb een validatie script van het internet afgehaald.
werkt goed.
Maar nu zou ik toch willen dat ipv een Alert box.
Dat de fout in de input type="text" name="naam" komt te staan.
Google en ik kwamen er niet uit.
Dit is mijn javascript code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// JavaScript Document
function validateFormOnSubmit(theForm) {
var reason = "";
reason += validateUsername(theForm.naam);
if (reason != "") {
alert("Deze velden zijn niet goed ingevuld:\n" + reason);
return false;
}
return true;
}
function validateEmpty(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'RED';
error = "Je hebt 1 van de velden niet ingevuldt.\n"
} else {
fld.style.background = 'White';
}
return error;
}
function validateUsername(fld) {
var error = "";
var illegalChars = /\W/; // allow letters, numbers, and underscores
if (fld.value == "") {
fld.style.background = 'Red';
error = "Je hebt geen naam opgegeven.\n";
} else if ((fld.value.length < 3) || (fld.value.length > 16)) {
fld.style.background = 'Red';
error = "Je naam dient tussen de 3 en de 16 tekens te liggen.\n";
} else if (illegalChars.test(fld.value)) {
fld.style.background = 'Red';
error = "Je naam bevat ongeldige tekens.\n";
} else {
fld.style.background = 'White';
}
return error;
}
function validateFormOnSubmit(theForm) {
var reason = "";
reason += validateUsername(theForm.naam);
if (reason != "") {
alert("Deze velden zijn niet goed ingevuld:\n" + reason);
return false;
}
return true;
}
function validateEmpty(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'RED';
error = "Je hebt 1 van de velden niet ingevuldt.\n"
} else {
fld.style.background = 'White';
}
return error;
}
function validateUsername(fld) {
var error = "";
var illegalChars = /\W/; // allow letters, numbers, and underscores
if (fld.value == "") {
fld.style.background = 'Red';
error = "Je hebt geen naam opgegeven.\n";
} else if ((fld.value.length < 3) || (fld.value.length > 16)) {
fld.style.background = 'Red';
error = "Je naam dient tussen de 3 en de 16 tekens te liggen.\n";
} else if (illegalChars.test(fld.value)) {
fld.style.background = 'Red';
error = "Je naam bevat ongeldige tekens.\n";
} else {
fld.style.background = 'White';
}
return error;
}
en dit is mijn form
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form method="post" onsubmit="validateFormOnSubmit(this),
minichat(document.getElementById('chattext').value,
document.getElementById('naam').value,
document.getElementById('ip').value),
document.getElementById('chattext').value = '',
document.getElementById('naam').value = '',
document.getElementById('ip').value = '';
return false;
">
Naam: <input class="mytext" id="naam" type="tekst" name="naam"/>
<input class="mytext" id="chattext" type="tekst" name="chat"/>
<input type="hidden" name="ipadress" id="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>" />
<input type="submit" name="verzend" value="Chatten" />
</form>
minichat(document.getElementById('chattext').value,
document.getElementById('naam').value,
document.getElementById('ip').value),
document.getElementById('chattext').value = '',
document.getElementById('naam').value = '',
document.getElementById('ip').value = '';
return false;
">
Naam: <input class="mytext" id="naam" type="tekst" name="naam"/>
<input class="mytext" id="chattext" type="tekst" name="chat"/>
<input type="hidden" name="ipadress" id="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>" />
<input type="submit" name="verzend" value="Chatten" />
</form>
Alvast bedankt
Op de plek waar nu de alert staat zet je het volgende:
document.getElementById('naam').value = reason;
Dat moet werken. Let op dat je de ID goed zet. Verder adviseer ik je om ipv een input een div / span te gebruiken, kan je de foutmelding mooi stylen met css. In dat geval zet je het volgende:
document.getElementById('naam').innerHTML = reason;
Alles wat je in javascript controleert, zal je moeten double checken in PHP
(off topic: haal eens die t weg uit ingevuldt)