Form validatie met javascript en 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
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
<?php
if( $_SERVER['REQUEST_METHOD'] == "POST" )
{
var_dump( $_POST );
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/common.css" media="screen" />
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div class="top"></div>
<div class="box-container">
<div class="box-top">Inloggen</div>
<div class="box-content">
<form name="form_login" id="form_login" method="post" action="">
<div class="box-content-div">
<label for="username">Gebruikersnaam:</label>
<label for="password">Wachtwoord:</label>
<label> </label>
</div>
<div class="box-content-div">
<input type="text" id="username" name="username" value="" size="40" />
<input type="password" id="password" name="password" value="" size="40" />
<div style="line-height: 30px;">
<div style="float: left; padding-top: 10px;">
<input type="checkbox" id="remember" name="remember" value="" />
</div>
<div style="float: left;">
Bewaar login informatie
</div>
</div>
<input type="button" id="submit" name="submit" value="Inloggen" onclick="validateForm();" />
</div>
</form>
</div>
</div>
</body>
</html>
if( $_SERVER['REQUEST_METHOD'] == "POST" )
{
var_dump( $_POST );
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/common.css" media="screen" />
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div class="top"></div>
<div class="box-container">
<div class="box-top">Inloggen</div>
<div class="box-content">
<form name="form_login" id="form_login" method="post" action="">
<div class="box-content-div">
<label for="username">Gebruikersnaam:</label>
<label for="password">Wachtwoord:</label>
<label> </label>
</div>
<div class="box-content-div">
<input type="text" id="username" name="username" value="" size="40" />
<input type="password" id="password" name="password" value="" size="40" />
<div style="line-height: 30px;">
<div style="float: left; padding-top: 10px;">
<input type="checkbox" id="remember" name="remember" value="" />
</div>
<div style="float: left;">
Bewaar login informatie
</div>
</div>
<input type="button" id="submit" name="submit" value="Inloggen" onclick="validateForm();" />
</div>
</form>
</div>
</div>
</body>
</html>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function validateForm()
{
var oSubmit = document.getElementsByTagName( "form" );
var oInputs = document.getElementsByTagName( "input" );
var sError = false;
for( i = 0; i < oInputs.length; i++ )
{
if( oInputs[i].getAttribute( "type" ) !== "button" && oInputs[i].getAttribute( "type" ) !== "checkbox" )
{
oInputs[i].style.border = "1px solid #D1D1D1";
if( oInputs[i].value == "" )
{
oInputs[i].style.border = "1px solid red";
sError = true;
}
}
}
if( false === sError )
{
oSubmit[0].submit;
}
}
{
var oSubmit = document.getElementsByTagName( "form" );
var oInputs = document.getElementsByTagName( "input" );
var sError = false;
for( i = 0; i < oInputs.length; i++ )
{
if( oInputs[i].getAttribute( "type" ) !== "button" && oInputs[i].getAttribute( "type" ) !== "checkbox" )
{
oInputs[i].style.border = "1px solid #D1D1D1";
if( oInputs[i].value == "" )
{
oInputs[i].style.border = "1px solid red";
sError = true;
}
}
}
if( false === sError )
{
oSubmit[0].submit;
}
}
Ik wil graag dat de PHP validatie verder gaat nadat javascript geen "fouten" terug geeft, maar na de js validatie gebeurt er niks.. Iemand enig idee waar ik de fout in ga?
- probeer eens if( false == sError ) ipv === voor het vergelijken van een boolean
- plaats eens een console.log of een alert binnen je laatste if.
- submit is een functie, geen property.. dus oSubmit[0].submit().
Scripting komt de if wel in maar volgende foutmelding met getriggerd wanneer ik oSubmit[0].submit() gebruik:
Fout: oSubmit[0].submit is not a function
Bronbestand: http://test.local/js/common.js
Regel: 22
document.myform.submit(); (http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml)
Normaal doe ik dit altijd met het jQuery framework (zou ik sowieso adviseren voor het valideren van form's).
Fout: document.form_login.submit is not a function
Bronbestand: http://test.local/js/common.js
Regel: 22
Wat doe ik verkeerd aan de hand van mijn code?
als je een JS form validatie wilt heb ik er 2 liggen die je heel makkelijk kan aanpassen.
<input type="button" id="submit" name="submit" value="Inloggen" onclick="validateForm();" />
Haal die id="submit" en name="submit" weg. Of geef ze gelijk welke andere naam.
(EDIT: de id kan geen kwaad, de name wel)
Die naam submit komt in conflict met de functie submit()
lijn 21 wordt dan
oSubmit[0].submit();
Gewijzigd op 21/03/2012 12:19:03 door Kris Peeters