[JS] Complexe formulier validatie
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<form>
<input type="checkbox" name="getactivity[]" id="Agetactivity1" />
<input type="checkbox" name="getactivity[]" id="Agetactivity2" />
<input type="checkbox" name="getactivity[]" id="Agetactivity3" />
<input type="checkbox" name="getactivity[]" id="Bgetactivity4" />
<input type="checkbox" name="getactivity[]" id="Bgetactivity5" />
<input type="checkbox" name="getactivity[]" id="Cgetactivity6" />
...
</form>
<input type="checkbox" name="getactivity[]" id="Agetactivity1" />
<input type="checkbox" name="getactivity[]" id="Agetactivity2" />
<input type="checkbox" name="getactivity[]" id="Agetactivity3" />
<input type="checkbox" name="getactivity[]" id="Bgetactivity4" />
<input type="checkbox" name="getactivity[]" id="Bgetactivity5" />
<input type="checkbox" name="getactivity[]" id="Cgetactivity6" />
...
</form>
Nu wil ik de volgende validatie met Javascript;
- Nooit meer dan 1 checkbox aangevinkt die een andere beginletter heeft (A,B,C, etc)
- Minimaal 1 checkbox aangevinkt
Ik weet niet echt waar ik moet beginnen met javascript. Kan iemand me hier mee helpen?
Gewijzigd op 01/01/1970 01:00:00 door Jeroen G
Jeroen schreef op 27.07.2008 11:28:
- Nooit meer dan 1 checkbox aangevinkt die een andere beginletter heeft (A,B,C, etc)
Deze moet je even uitleggen?
Jan Koehoorn schreef op 27.07.2008 11:29:
Deze moet je even uitleggen?
De id's van de formulier elementen beginnen allemaal met een ander nummer of cijfer.
Dus Agetactivity1 en Agetactivity2 mogen WEL tegelijk aangevinkt en verstuurd worden. En Agetactivity1 BAgetactivity3 bijvoorbeeld niet.
Gewijzigd op 01/01/1970 01:00:00 door Jeroen G
Jeroen schreef op 27.07.2008 11:31:
De id's van de formulier elementen beginnen allemaal met een ander nummer of cijfer.
Dat is niet waar. In je voorbeeld zijn er drie die met een A beginnen.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Jan Koehoorn schreef op 27.07.2008 11:33:
Dat is niet waar. In je voorbeeld zijn er drie die met een A beginnen.
Klopt, het aantal is variabel. Het zouden er ook 10 kunnen zijn.
Dus je hebt bijvoorbeeld
Agetactivity1
Agetactivity2
Agetactivity3
Agetactivity5
Agetactivity6
Bgetactivity7
Bgetactivity8
Bgetactivity9
Bgetactivity10
ect, ect
of eventueel met nummers zou ook kunnen. Ik kan me indenken dat dit in javascript een stuk eenvoudiger is.. dus dan zou het zo worden.
1getactivity1
1getactivity2
1getactivity3
1getactivity4
2getactivity5
2getactivity6
2getactivity7
2getactivity8
etc, etc, etc.
Gewijzigd op 01/01/1970 01:00:00 door Jeroen G
Quote:
En Agetactivity1 BAgetactivity3 bijvoorbeeld niet.
BAgetactivity komt in je voorbeeld niet voor?
Edit: bedoel je dat de user minstens een checkbox moet aanvinken en dat er alleen checkboxen aangevinkt mogen worden met dezelfde beginletter?
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Jan Koehoorn schreef op 27.07.2008 11:36:
BAgetactivity komt in je voorbeeld niet voor?
Dat was een spelfout.. :S
Quote:
Edit: bedoel je dat de user minstens een checkbox moet aanvinken en dat er alleen checkboxen aangevinkt mogen worden met dezelfde beginletter?
Dat bedoel ik inderdaad. Maar wellicht makkelijker met een begin nummer
Gewijzigd op 01/01/1970 01:00:00 door Jeroen G
Quote:
Dat bedoel ik inderdaad. Maar wellicht makkelijker met een begin nummer
id's met een nummer laten beginnen is geloof ik niet toegestaan, dus een letter is handiger.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<fieldset id="Area1">
<input type="checkbox" name="getactivity[]" id="getactivity1" />
<input type="checkbox" name="getactivity[]" id="getactivity2" />
...
</fieldset>
<fieldset id="Area2">
<input type="checkbox" name="getactivity[]" id="getactivity3" />
<input type="checkbox" name="getactivity[]" id="getactivity4" />
...
</fieldset>
<fieldset id="Area3">
<input type="checkbox" name="getactivity[]" id="getactivity5" />
<input type="checkbox" name="getactivity[]" id="getactivity6" />
...
</fieldset>
<input type="checkbox" name="getactivity[]" id="getactivity1" />
<input type="checkbox" name="getactivity[]" id="getactivity2" />
...
</fieldset>
<fieldset id="Area2">
<input type="checkbox" name="getactivity[]" id="getactivity3" />
<input type="checkbox" name="getactivity[]" id="getactivity4" />
...
</fieldset>
<fieldset id="Area3">
<input type="checkbox" name="getactivity[]" id="getactivity5" />
<input type="checkbox" name="getactivity[]" id="getactivity6" />
...
</fieldset>
Deze markup heb ik nu.. Ik neem aan dat je dit bedoeld?
edit: Is het dan dit in JS:
document.form.fieldset.item.value?
Gewijzigd op 01/01/1970 01:00:00 door Jeroen G
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?php
header ('Content-type: text/html; charset=UTF-8');
ini_set ('display_errors', 1);
error_reporting (E_ALL | E_STRICT);
$config = array (
'title' => 'Jan Koehoorn | Examples | Onderdeel | Titel'
);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $config['title']; ?></title>
<script type="text/javascript" src="mootools/mootools.js"></script>
<script type="text/javascript">
window.addEvent ('domready', function () {
$$('fieldset').each (function (item) {
item.getChildren ().each (function (box) {
// hier je controle
});
});
});
</script>
<link rel="stylesheet" type="text/css" media="screen" href="reset.css" />
<style type="text/css" media="screen">
div#container {margin: 10px auto; padding: 10px; width: 800px; background: #fe6;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo $config['title']; ?></h1>
</div>
<div id="content">
<form method="post" accept-charset="UTF8" action="test.php">
<fieldset id="set_a">
<input name="activity[]" type="checkbox" value="1" />1
<input name="activity[]" type="checkbox" value="2" />2
<input name="activity[]" type="checkbox" value="3" />3
</fieldset>
<fieldset id="set_b">
<input name="activity[]" type="checkbox" value="1" />1
<input name="activity[]" type="checkbox" value="2" />2
<input name="activity[]" type="checkbox" value="3" />3
</fieldset>
<fieldset id="set_c">
<input name="activity[]" type="checkbox" value="1" />1
<input name="activity[]" type="checkbox" value="2" />2
<input name="activity[]" type="checkbox" value="3" />3
</fieldset>
</form>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
header ('Content-type: text/html; charset=UTF-8');
ini_set ('display_errors', 1);
error_reporting (E_ALL | E_STRICT);
$config = array (
'title' => 'Jan Koehoorn | Examples | Onderdeel | Titel'
);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $config['title']; ?></title>
<script type="text/javascript" src="mootools/mootools.js"></script>
<script type="text/javascript">
window.addEvent ('domready', function () {
$$('fieldset').each (function (item) {
item.getChildren ().each (function (box) {
// hier je controle
});
});
});
</script>
<link rel="stylesheet" type="text/css" media="screen" href="reset.css" />
<style type="text/css" media="screen">
div#container {margin: 10px auto; padding: 10px; width: 800px; background: #fe6;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo $config['title']; ?></h1>
</div>
<div id="content">
<form method="post" accept-charset="UTF8" action="test.php">
<fieldset id="set_a">
<input name="activity[]" type="checkbox" value="1" />1
<input name="activity[]" type="checkbox" value="2" />2
<input name="activity[]" type="checkbox" value="3" />3
</fieldset>
<fieldset id="set_b">
<input name="activity[]" type="checkbox" value="1" />1
<input name="activity[]" type="checkbox" value="2" />2
<input name="activity[]" type="checkbox" value="3" />3
</fieldset>
<fieldset id="set_c">
<input name="activity[]" type="checkbox" value="1" />1
<input name="activity[]" type="checkbox" value="2" />2
<input name="activity[]" type="checkbox" value="3" />3
</fieldset>
</form>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Ik snap de opzet niet helemaal. Ik ben niet zo goed in Javascript... Zou het dan uiteindelijk zoiets moeten worden?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
function checkform() {
window.addEvent ('domready', function () {
$$('fieldset').each (function (item) {
item.getChildren ().each (function (box) {
if (!document.form.activity.checked) {
alert ( "Error" );
}
});
});
});
};
window.addEvent ('domready', function () {
$$('fieldset').each (function (item) {
item.getChildren ().each (function (box) {
if (!document.form.activity.checked) {
alert ( "Error" );
}
});
});
});
};