Probleem met Radio button validatie
Ik wil in mijn formulier aangeven dat men een radio button verplicht moet kiezen.
Bij de overige invoervelden werkt de validatie correct, alleen bij mijn radio buttons kom ik problemen tegen.
Op dit moment werkt de validatie wel, maar overschrijft de foutmelding de eerste antwoord optie. Hoe kan ik deze correct stijlen?
Code (php)
1
2
3
4
2
3
4
/* Vraag 2 Validation */
if(!$vraag2_antwoorden || mb_strlen($vraag2_antwoorden = trim($vraag2_antwoorden)) == 0)
$this->setError('vraag2_antwoorden', 'Selecter een antwoord a.u.b.');
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<table width="400px" cellpadding="0" cellspacing="0">
<tr>
<td><input type="radio" name="vraag2_antwoorden" id="vraag2_antwoorden" value="A" /><label for="vraag2_antwoorden">A) Antwoord</label></td>
<td><input type="radio" name="vraag2_antwoorden" id="vraag2_antwoorden" value="C" /><label for="vraag2_antwoorden">C) Antwoord</label></td>
</tr>
<tr>
<td><input type="radio" name="vraag2_antwoorden" id="vraag2_antwoorden" value="B" /><label for="vraag2_antwoorden">B) Antwoord</label></td>
<td><input type="radio" name="vraag2_antwoorden" id="vraag2_antwoorden" value="D" /><label for="vraag2_antwoord_D">D) Antwoord</label></td>
</tr>
<tr>
<td colspan="2"><span name="vraag2_antwoorden" id="vraag2_antwoorden" class="foutmelding_antwoorden" style="display:none;"></span></td>
</tr>
</table>
<tr>
<td><input type="radio" name="vraag2_antwoorden" id="vraag2_antwoorden" value="A" /><label for="vraag2_antwoorden">A) Antwoord</label></td>
<td><input type="radio" name="vraag2_antwoorden" id="vraag2_antwoorden" value="C" /><label for="vraag2_antwoorden">C) Antwoord</label></td>
</tr>
<tr>
<td><input type="radio" name="vraag2_antwoorden" id="vraag2_antwoorden" value="B" /><label for="vraag2_antwoorden">B) Antwoord</label></td>
<td><input type="radio" name="vraag2_antwoorden" id="vraag2_antwoorden" value="D" /><label for="vraag2_antwoord_D">D) Antwoord</label></td>
</tr>
<tr>
<td colspan="2"><span name="vraag2_antwoorden" id="vraag2_antwoorden" class="foutmelding_antwoorden" style="display:none;"></span></td>
</tr>
</table>
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
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
$(document).ready(function() {
contact.initEventHandlers();
});
var contact = {
initEventHandlers : function() {
/* clicking the submit form */
$('#send').bind('click',function(event){
$('#loader').show();
setTimeout('contact.ContactFormSubmit()',500);
});
/* remove messages when user wants to correct (focus on the input) */
$('.inplaceError, .foutmelding_antwoorden',$('#ContactForm')).bind('focus',function(){
var $this = $(this);
var $error_elem = $this.next();
if($error_elem.length)
$error_elem.fadeOut(function(){$(this).empty()});
$('#success_message').empty();
});
/* user presses enter - submits form */
$('#ContactForm input,#ContactForm textarea').keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$("#send").click();
return false;
}
else
return true;
});
},
ContactFormSubmit : function() {
$.ajax({
type : 'POST',
url : 'php/contact.php?ts='+new Date().getTime(),
dataType : 'json',
data : $('#ContactForm').serialize(),
success : function(data,textStatus){
//hide the ajax loader
$('#loader').hide();
if(data.result == '1'){
//show success message
$('#midden').remove();
$('#success_message').empty().html('<strong>Quiz</strong><br /><br />Bedankt voor uw participatie.');
}
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='')
$("#"+data.errors[i].name).next().html('<span class="foutmelding_antwoorden">'+data.errors[i].value+'</span>').fadeIn();
}
}
},
error : function(data,textStatus){}
});
}
};
contact.initEventHandlers();
});
var contact = {
initEventHandlers : function() {
/* clicking the submit form */
$('#send').bind('click',function(event){
$('#loader').show();
setTimeout('contact.ContactFormSubmit()',500);
});
/* remove messages when user wants to correct (focus on the input) */
$('.inplaceError, .foutmelding_antwoorden',$('#ContactForm')).bind('focus',function(){
var $this = $(this);
var $error_elem = $this.next();
if($error_elem.length)
$error_elem.fadeOut(function(){$(this).empty()});
$('#success_message').empty();
});
/* user presses enter - submits form */
$('#ContactForm input,#ContactForm textarea').keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$("#send").click();
return false;
}
else
return true;
});
},
ContactFormSubmit : function() {
$.ajax({
type : 'POST',
url : 'php/contact.php?ts='+new Date().getTime(),
dataType : 'json',
data : $('#ContactForm').serialize(),
success : function(data,textStatus){
//hide the ajax loader
$('#loader').hide();
if(data.result == '1'){
//show success message
$('#midden').remove();
$('#success_message').empty().html('<strong>Quiz</strong><br /><br />Bedankt voor uw participatie.');
}
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='')
$("#"+data.errors[i].name).next().html('<span class="foutmelding_antwoorden">'+data.errors[i].value+'</span>').fadeIn();
}
}
},
error : function(data,textStatus){}
});
}
};
Gewijzigd op 10/08/2012 15:12:58 door Sebas V
Sebastian Veldman op 10/08/2012 13:58:10:
.. maar komt de foutmelding bij de eerste radio button terecht ..
Waar anders?
Echter ben ik geen Javascript expert, dus misschien iemand die wel een antwoord weet?
Zoals je tabel nu gemaakt is, zal er inderdaad weinig werken.
Een span moet ook geen name hebben.
Ik stel voor dat je dat stuk HTML eens herschrijft.
Dan acht ik de kans groot dat je geen letter javascript moet veranderen.
----
Houd de id van de span zoals ze nu is. Verander alle andere id's en zorg dat ze allemaal uniek zijn. Pas ook de "for" van de labels aan aan de nieuwe id-namen
Gewijzigd op 10/08/2012 15:39:54 door Kris Peeters
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<table width="400px" cellpadding="0" cellspacing="0">
<tr>
<td><input type="radio" name="vraag1_A" id="vraag1_A" value="A" /><label for="vraag1_A">A) Geen eis</label></td><td><input type="radio" name="vraag1_C" id="vraag1_C" value="C" /><label for="vraag1_C">C) 1 Ohm</label></td>
</tr>
<tr>
<td><input type="radio" name="vraag1_B" id="vraag1_B" value="B" /><label for="vraag1_B">B) 10 Ohm</label></td><td><input type="radio" name="vraag1_D" id="vraag1_D" value="D" /><label for="vraag1_D">D) 0,1 ohm</label></td>
</tr>
<tr>
<td colspan="2"><span name="vraag1_antwoorden" id="vraag1_antwoorden" class="foutmelding_antwoorden" style="display:none;"></span></td>
</tr>
</table>
<tr>
<td><input type="radio" name="vraag1_A" id="vraag1_A" value="A" /><label for="vraag1_A">A) Geen eis</label></td><td><input type="radio" name="vraag1_C" id="vraag1_C" value="C" /><label for="vraag1_C">C) 1 Ohm</label></td>
</tr>
<tr>
<td><input type="radio" name="vraag1_B" id="vraag1_B" value="B" /><label for="vraag1_B">B) 10 Ohm</label></td><td><input type="radio" name="vraag1_D" id="vraag1_D" value="D" /><label for="vraag1_D">D) 0,1 ohm</label></td>
</tr>
<tr>
<td colspan="2"><span name="vraag1_antwoorden" id="vraag1_antwoorden" class="foutmelding_antwoorden" style="display:none;"></span></td>
</tr>
</table>
Hoe zit het dan met mijn contact.php daarin staat nu (hieronder)
Code (php)
1
2
3
4
2
3
4
/* Vraag 1 Validation */
if(!$vraag1_antwoorden || mb_strlen($vraag1_antwoorden = trim($vraag1_antwoorden)) == 0)
$this->setError('vraag1_antwoorden', 'Selecteer een antwoord a.u.b.');
De name niet.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<table width="400px" cellpadding="0" cellspacing="0">
<tr>
<td><input type="radio" name="vraag1_antwoorden" id="vraag1_A" value="A" /><label for="vraag1_A">A) Geen eis</label></td><td><input type="radio" name="vraag1_antwoorden" id="vraag1_C" value="C" /><label for="vraag1_C">C) 1 Ohm</label></td>
</tr>
<tr>
<td><input type="radio" name="vraag1_antwoorden" id="vraag1_B" value="B" /><label for="vraag1_B">B) 10 Ohm</label></td><td><input type="radio" name="vraag1_antwoorden" id="vraag1_D" value="D" /><label for="vraag1_D">D) 0,1 ohm</label></td>
</tr>
<tr>
<td colspan="2"><span id="vraag1_antwoorden" class="foutmelding_antwoorden" style="display:none;"></span></td>
</tr>
</table>
<tr>
<td><input type="radio" name="vraag1_antwoorden" id="vraag1_A" value="A" /><label for="vraag1_A">A) Geen eis</label></td><td><input type="radio" name="vraag1_antwoorden" id="vraag1_C" value="C" /><label for="vraag1_C">C) 1 Ohm</label></td>
</tr>
<tr>
<td><input type="radio" name="vraag1_antwoorden" id="vraag1_B" value="B" /><label for="vraag1_B">B) 10 Ohm</label></td><td><input type="radio" name="vraag1_antwoorden" id="vraag1_D" value="D" /><label for="vraag1_D">D) 0,1 ohm</label></td>
</tr>
<tr>
<td colspan="2"><span id="vraag1_antwoorden" class="foutmelding_antwoorden" style="display:none;"></span></td>
</tr>
</table>
Zie eens of het hiermee werkt.
Gewijzigd op 10/08/2012 16:17:51 door Kris Peeters
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
71
72
73
74
75
76
77
78
79
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
71
72
73
74
75
76
77
78
79
public function processNewMessage(){
$contactpersoon = $_POST['contactpersoon'];
$bedrijfsnaam = $_POST['bedrijfsnaam'];
$telefoon = $_POST['telefoon'];
$email = $_POST['email'];
$vraag1_antwoorden = $_POST['vraag1_antwoorden'];
$vraag2_antwoorden = $_POST['vraag2_antwoorden'];
/* Server Side Data Validation */
/* Contactpersoon Validation */
if(!$contactpersoon || mb_strlen($contactpersoon = trim($contactpersoon)) == 0)
$this->setError('contactpersoon', 'Vul uw contactpersoon in');
else if(mb_strlen(trim($contactpersoon)) > 120)
$this->setError('contactpersoon', 'Te lang! 120 karakters max.');
/* Bedrijfsnaam Validation */
if(!$bedrijfsnaam || mb_strlen($bedrijfsnaam = trim($bedrijfsnaam)) == 0)
$this->setError('bedrijfsnaam', 'Vul uw bedrijfsnaam in');
else if(mb_strlen(trim($bedrijfsnaam)) > 120)
$this->setError('bedrijfsnaam', 'Te lang! 120 karakters max.');
/* Telefoon Validation */
if(!$telefoon || mb_strlen($telefoon = trim($telefoon)) == 0)
$this->setError('telefoon', 'Vul uw telefoonnummer in');
else if(mb_strlen(trim($telefoon)) > 120)
$this->setError('telefoon', 'Te lang! 120 karakters max.');
/* Vraag 1 Validation */
if(!$vraag1_antwoorden || mb_strlen($vraag1_antwoorden = trim($vraag1_antwoorden)) == 0)
$this->setError('vraag1_antwoorden', 'Selecteer een antwoord a.u.b.');
/* Vraag 2 Validation */
if(!$vraag2_antwoorden || mb_strlen($vraag2_antwoorden = trim($vraag2_antwoorden)) == 0)
$this->setError('vraag2_antwoorden', 'Selecteer een antwoord a.u.b.');
/* Email Validation */
if(!$email || mb_strlen($email = trim($email)) == 0)
$this->setError('email','Vul uw e-mail in');
else{
if(!is_email($email))
$this->setError('email', 'Vul een correct email adres in');
else if(mb_strlen($email) > 120)
$this->setError('email', 'Te lang! 120 karakters max.');
}
/* Errors exist */
if($this->countErrors() > 0){
$json = array(
'result' => -1,
'errors' => array(
array('name' => 'contactpersoon' ,'value' => $this->error_value('contactpersoon')),
array('name' => 'bedrijfsnaam' ,'value' => $this->error_value('bedrijfsnaam')),
array('name' => 'email' ,'value' => $this->error_value('email')),
array('name' => 'telefoon' ,'value' => $this->error_value('telefoon')),
array('name' => 'vraag1_antwoorden' ,'value' => $this->error_value('vraag1_antwoorden')),
array('name' => 'vraag2_antwoorden' ,'value' => $this->error_value('vraag2_antwoorden')),
)
);
$encoded = json_encode($json);
echo $encoded;
unset($encoded);
}
/* No errors, insert in db*/
else{
if(($ret = $this->db->dbNewMessage($contactpersoon, $bedrijfsnaam, $email, $telefoon, $vraag1_antwoorden, $vraag2_antwoorden)) > 0){
$json = array('result' => 1);
if(SEND_EMAIL)
$this->sendEmail($contactpersoon,$bedrijfsnaam,$email,$telefoon,$vraag1_antwoorden,$vraag2_antwoorden);
}
else
$json = array('result' => -2); /* something went wrong in database insertion */
$encoded = json_encode($json);
echo $encoded;
unset($encoded);
}
}
$contactpersoon = $_POST['contactpersoon'];
$bedrijfsnaam = $_POST['bedrijfsnaam'];
$telefoon = $_POST['telefoon'];
$email = $_POST['email'];
$vraag1_antwoorden = $_POST['vraag1_antwoorden'];
$vraag2_antwoorden = $_POST['vraag2_antwoorden'];
/* Server Side Data Validation */
/* Contactpersoon Validation */
if(!$contactpersoon || mb_strlen($contactpersoon = trim($contactpersoon)) == 0)
$this->setError('contactpersoon', 'Vul uw contactpersoon in');
else if(mb_strlen(trim($contactpersoon)) > 120)
$this->setError('contactpersoon', 'Te lang! 120 karakters max.');
/* Bedrijfsnaam Validation */
if(!$bedrijfsnaam || mb_strlen($bedrijfsnaam = trim($bedrijfsnaam)) == 0)
$this->setError('bedrijfsnaam', 'Vul uw bedrijfsnaam in');
else if(mb_strlen(trim($bedrijfsnaam)) > 120)
$this->setError('bedrijfsnaam', 'Te lang! 120 karakters max.');
/* Telefoon Validation */
if(!$telefoon || mb_strlen($telefoon = trim($telefoon)) == 0)
$this->setError('telefoon', 'Vul uw telefoonnummer in');
else if(mb_strlen(trim($telefoon)) > 120)
$this->setError('telefoon', 'Te lang! 120 karakters max.');
/* Vraag 1 Validation */
if(!$vraag1_antwoorden || mb_strlen($vraag1_antwoorden = trim($vraag1_antwoorden)) == 0)
$this->setError('vraag1_antwoorden', 'Selecteer een antwoord a.u.b.');
/* Vraag 2 Validation */
if(!$vraag2_antwoorden || mb_strlen($vraag2_antwoorden = trim($vraag2_antwoorden)) == 0)
$this->setError('vraag2_antwoorden', 'Selecteer een antwoord a.u.b.');
/* Email Validation */
if(!$email || mb_strlen($email = trim($email)) == 0)
$this->setError('email','Vul uw e-mail in');
else{
if(!is_email($email))
$this->setError('email', 'Vul een correct email adres in');
else if(mb_strlen($email) > 120)
$this->setError('email', 'Te lang! 120 karakters max.');
}
/* Errors exist */
if($this->countErrors() > 0){
$json = array(
'result' => -1,
'errors' => array(
array('name' => 'contactpersoon' ,'value' => $this->error_value('contactpersoon')),
array('name' => 'bedrijfsnaam' ,'value' => $this->error_value('bedrijfsnaam')),
array('name' => 'email' ,'value' => $this->error_value('email')),
array('name' => 'telefoon' ,'value' => $this->error_value('telefoon')),
array('name' => 'vraag1_antwoorden' ,'value' => $this->error_value('vraag1_antwoorden')),
array('name' => 'vraag2_antwoorden' ,'value' => $this->error_value('vraag2_antwoorden')),
)
);
$encoded = json_encode($json);
echo $encoded;
unset($encoded);
}
/* No errors, insert in db*/
else{
if(($ret = $this->db->dbNewMessage($contactpersoon, $bedrijfsnaam, $email, $telefoon, $vraag1_antwoorden, $vraag2_antwoorden)) > 0){
$json = array('result' => 1);
if(SEND_EMAIL)
$this->sendEmail($contactpersoon,$bedrijfsnaam,$email,$telefoon,$vraag1_antwoorden,$vraag2_antwoorden);
}
else
$json = array('result' => -2); /* something went wrong in database insertion */
$encoded = json_encode($json);
echo $encoded;
unset($encoded);
}
}
Gewijzigd op 10/08/2012 16:45:04 door Sebas V
Wat gebeurt er?
Javascript zal nu kijken welk soort element $("#"+data.errors.name) is.
Wanneer dit element een tekst input is, blijft alles gelijk.
Wanneer het echter al een <span> is, gaan we gewoon die span zelf gebruiken, en niet die next(). ...
Lijnen 43 tot 48 (zoals ze staan in de eerste post) vervang je door dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='') {
var elm = $("#"+data.errors[i].name);
// we gaan kijken welk soort element elm is.
// wanneer dat element een span is, moeten we geen nieuwe span meer aanmaken...
switch (elm[0].tagName.toLowerCase()) {
case 'span':
elm.html(data.errors[i].value).fadeIn();
break;
default:
elm.next().html('<span class="foutmelding_antwoorden">'+data.errors[i].value+'</span>').fadeIn();
break;
}
}
}
}
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='') {
var elm = $("#"+data.errors[i].name);
// we gaan kijken welk soort element elm is.
// wanneer dat element een span is, moeten we geen nieuwe span meer aanmaken...
switch (elm[0].tagName.toLowerCase()) {
case 'span':
elm.html(data.errors[i].value).fadeIn();
break;
default:
elm.next().html('<span class="foutmelding_antwoorden">'+data.errors[i].value+'</span>').fadeIn();
break;
}
}
}
}
Gewijzigd op 10/08/2012 17:03:54 door Kris Peeters
Ik zeg proost, fijn weekend!