Formuliercontrole met 'value'
Wanneer je submit moet natuurlijk gecontroleerd worden dat de meegegeven waarde niet overeenkomt met het attribuut 'value'. Je moet met andere woorden iets anders ingevuld hebben in het tekstvak.
Met X.attr('name') lukte het perfect maar dan moest ik de POST-namen aanpassen in het Nederlands en in hou het liever in het Engels. Daarom heb ik, ergens logisch, de value-attribuut gebruikt. Sindsdien wordt er altijd 'false' gereturned.
Die controle probeer ik met dit stukje. Het moet foutlopen bij X.val() == X.attr('value').
De formuliercontrole wordt opgeroepen bij de submit van het formulier (onsubmit)
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
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
<script type="text/javascript">
function check_form()
{
var the_return = true;
var empty_fields = ['username','password1','password2','name','firstname'];
for (i=0; i<empty_fields.length; i++)
{
var $field = $('#'+empty_fields[i]);
if ($.trim($field.val()) == '')
{
$field.addClass('error');
the_return = false;
}
else
{
if($.trim($field.val()) == $field.attr('value'))
{
$field.addClass('error');
the_return = false;
}
else
{
$field.removeClass('error');
}
}
}
if (the_return == true)
{
if( $.trim($('#password1').val()) != $.trim($('#password2').val()) )
{
$('#password1').addClass('error');
$('#password2').addClass('error');
the_return = false;
}
}
return the_return;
}
</script>
function check_form()
{
var the_return = true;
var empty_fields = ['username','password1','password2','name','firstname'];
for (i=0; i<empty_fields.length; i++)
{
var $field = $('#'+empty_fields[i]);
if ($.trim($field.val()) == '')
{
$field.addClass('error');
the_return = false;
}
else
{
if($.trim($field.val()) == $field.attr('value'))
{
$field.addClass('error');
the_return = false;
}
else
{
$field.removeClass('error');
}
}
}
if (the_return == true)
{
if( $.trim($('#password1').val()) != $.trim($('#password2').val()) )
{
$('#password1').addClass('error');
$('#password2').addClass('error');
the_return = false;
}
}
return the_return;
}
</script>
Gewijzigd op 27/12/2012 15:40:48 door Bart C
Quote:
if($.trim($field.val()) == $field.attr('value'))
Dat zal niet werken.
$field.val() is het zelfde als $field.attr('value') en is het zelfde als $field[0].value
Die gaan exact naar het zelfde zoeken.
Wat je moet doen:
Bij het laden van de pagina lees je de value's en je copiëert ze in variabelen.
Dan vergelijk je $field.val() met die waarde.
---
Trouwens, wat Erwin zegt, is nog beter.
Dan hoef je helemaal niets te doen.
zie
http://www.w3schools.com/html5/att_input_placeholder.asp
Gewijzigd op 27/12/2012 15:45:22 door Kris Peeters
Erwin H op 27/12/2012 15:39:59:
Volgens mij hebben ze daar het attribuut 'placeholder' voor uitgevonden...
Thanks Erwin! Works like a charm.
Gewijzigd op 27/12/2012 15:46:18 door Bart C
Erwin H op 27/12/2012 15:51:38:
Nu schijnt het alleen niet helemaal te werken in IE (of in elk geval oudere versies), maar ja.... wie kijkt daar nog van op....
Een mens moet meegaan met zijn tijd hé. Binnenkort ga ik een bijscholing vormen voor HTML5, CSS3 en Javascript. Ik verheug me erop
Toevoeging op 27/12/2012 16:31:45:
Erwin H op 27/12/2012 15:51:38:
Nu schijnt het alleen niet helemaal te werken in IE (of in elk geval oudere versies), maar ja.... wie kijkt daar nog van op....
Een mens moet meegaan met zijn tijd hé. Binnenkort ga ik een bijscholing vormen voor HTML5, CSS3 en Javascript. Ik verheug me erop
Als je bij familie op bezoek gaat, update dan hun webbrowser.
De developers zullen u dankbaar zijn :)
Kris Peeters op 28/12/2012 10:10:29:
Misschien een tip voor de kerstdagen:
Als je bij familie op bezoek gaat, update dan hun webbrowser.
De developers zullen u dankbaar zijn :)
Als je bij familie op bezoek gaat, update dan hun webbrowser.
De developers zullen u dankbaar zijn :)
Dat probeer ik bij alle feestdagen/familiebezoekjes :-)