validation form
link
alleen werkt deze niet als ik submit, kan iemand me helpen?
hetgeen wat ik heb
index.php
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>login</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="formvalidationplugin.js" type="text/javascript">
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<div id="container">
<div id="outer">
Email
<input id="email" name="email" type="text" value="" onblur="return chkEmail();" />
</div>
<div id="slide"><div id="tube"> </div></div>
<br clear="all" />
<div id="outer">
Password
<input id="password" name="password" type="password" value="" onblur="return chkPassword();" />
<em>Minimum 5 characters</em>
</div>
<div id="slide2"><div id="tube2"> </div></div>
<br clear="all" />
<br clear="all" />
<input type="button" name="submit" value="Submit Now !" id="button" onclick="chkForm()" />
</div>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>login</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="formvalidationplugin.js" type="text/javascript">
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<div id="container">
<div id="outer">
Email
<input id="email" name="email" type="text" value="" onblur="return chkEmail();" />
</div>
<div id="slide"><div id="tube"> </div></div>
<br clear="all" />
<div id="outer">
Password
<input id="password" name="password" type="password" value="" onblur="return chkPassword();" />
<em>Minimum 5 characters</em>
</div>
<div id="slide2"><div id="tube2"> </div></div>
<br clear="all" />
<br clear="all" />
<input type="button" name="submit" value="Submit Now !" id="button" onclick="chkForm()" />
</div>
<body>
</body>
</html>
en de JS
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
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
// JavaScript Document
function chkForm ()
{
chkEmail();
chkPassword();
}
function chkEmail(){
//testing regular expression
var a = $("#email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
//if it's valid email
if(filter.test(a))
{
$('#tube').animate({ width: 'show' });
return false;
}
else
{
$('#tube').animate({ width: 'hide' });
return false;
}
}
function chkPassword()
{
var pass1 = $("#password");
if(pass1.val().length < 5){
$('#tube2').animate({ width: 'hide' });
return false;
}
else
{
$('#tube2').animate({ width: 'show' });
}
}
function chkForm ()
{
chkEmail();
chkPassword();
}
function chkEmail(){
//testing regular expression
var a = $("#email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
//if it's valid email
if(filter.test(a))
{
$('#tube').animate({ width: 'show' });
return false;
}
else
{
$('#tube').animate({ width: 'hide' });
return false;
}
}
function chkPassword()
{
var pass1 = $("#password");
if(pass1.val().length < 5){
$('#tube2').animate({ width: 'hide' });
return false;
}
else
{
$('#tube2').animate({ width: 'show' });
}
}
Gesponsorde koppelingen:
Het wachtwoord veld doet wel wat hij zecht...
Maar het email veld controleerd niet op .nl/.com/.eu enz...
als je bijvoorbeeld al invuld: info@asderd dan keurt hij hem al goed...
Toevoeging op 03/02/2012 11:17:25:
heb het al opgelost deze had teveel fouten dus ik ben op zoek gegaan naar een andere en heb een goede gevonden :) dankjewel
bv;
Code (php)
1
2
3
4
2
3
4
<script src="99points.js" type="text/javascript"></script>
<script src="formvalidationplugin.js" type="text/javascript">
</script>
<script src="formvalidationplugin.js" type="text/javascript">
</script>
maar het lijkt mij sterk dat het aan een br/enter ligt maar wat doet hij wel en wat niet ?
valideert hij hem wel op de pagina zelf of stuurt hij hem enkel na de validatie niet door naar de volgende ?
Daar schelen een aantal dingen aan.
- Om te beginnen, zet eens je html elementen binnen <body>, niet er boven.
- Best niet je formulier controleren op onclick van de button, maar op onsubmit van het form.
Nu ... onmiddellijk relativeren ...
Het lijkt er op dat je geen <form> hebt, maar enkel een subbmit toelaat via javascript.
Dus ja; in dit geval kan het wel zoals je het zet.
- Functies functioneel gebruiken (Haal procedures en functies uit mekaar).
Zie dat je een functie hebt die enkel bekijkt of de waarde al dan niet in orde is (deze functie geeft true of false terug) en daarnaast een functie die daar iets mee doet; (bv. $('#tube').animate({ width: 'show' }); )
- Je gebruikt jQuery niet optimaal; het meeste gebruik je op de klassieke javascript manier. Maar tot daar aan toe; zoveel geeft dat niet.
------
return false:
bv. <a href="..." onclick="return chkEmail();"/>
Wat doet dit? indien chkEmail() een false terug geeft, zal de "normale werking" van een klik op een <a> niet worden uitgevoerd.
Normaalgezien ga je daarmee naar een andere pagina. Een return false zal er voor zorgen dat je de pagina niet verlaat.
Dit echter ...
onblur="return chkEmail();"
zal er voor zorgen dat de blur niet wordt uitgevoerd. Daarmee zal de cursor van de gebruiker dus in de input blijven. Lijkt me niet echt gebruiksvriendelijk.
Gewijzigd op 03/02/2012 11:39:09 door Kris Peeters
maar ik heb nu een werkende(betere) gevonden dankjewel
