PHP
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#username").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Kijken in de database').fadeIn("slow");
//check the username exists or not from ajax
$.post("register/user_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Deze gebruikersnaam bestaat al').addClass('messageboxerror').fadeTo(900,1);
});
}
else {
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Deze naam is nog niet in gebruik').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
$(document).ready(function()
{
$("#pass").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#passmessage").removeClass().addClass('messagebox').text('Wachtwoord check').fadeIn("slow");
//check the username exists or not from ajax
$.post("register/pass_check.php",{ user_name:$('#username').val(),pass:$('#pass').val() } ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#passmessage").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Je wachtwoord is het zelfde als je gebruikersnaam').addClass('messageboxerror').fadeTo(900,1);
});
}
else if(data=='min') //if username not avaiable
{
$("#passmessage").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Je moet minimaal 8 tekens in je wachtwoord').addClass('messageboxerror').fadeTo(900,1);
});
}
else if(data=='empty') //if username not avaiable
{
$("#passmessage").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Je moet wel wat invullen').addClass('messageboxerror').fadeTo(900,1);
});
}
else {
$("#passmessage").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Dit wachtwoord is goed').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
$(document).ready(function()
{
$("#regels").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#regelbericht").removeClass().addClass('messagebox').text('Regelcheck').fadeIn("slow");
//check the username exists or not from ajax
$.post("register/regel_check.php",{ regels:$('#regels').val()} ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#regelbericht").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Accepteer de regels').addClass('messageboxerror').fadeTo(900,1);
});
}
else {
$("#regelbericht").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Je heb de regels geaccepteert').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
$(document).ready(function()
{
$("#pass2").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#herhaalmessage").removeClass().addClass('messagebox').text('Wachtwoord check').fadeIn("slow");
//check the username exists or not from ajax
$.post("register/pass_herhaal.php",{ pass:$('#pass').val(),pass2:$('#pass2').val() } ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#herhaalmessage").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Je wachtwoorden zijn niet gelijk').addClass('messageboxerror').fadeTo(900,1);
});
}
else if(data=='empty') //if username not avaiable
{
$("#herhaalmessage").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Je heb geen wachtwoord ingevult').addClass('messageboxerror').fadeTo(900,1);
});
}
else {
$("#herhaalmessage").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Je wachtwoorden zijn gelijk').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
$(document).ready(function()
{
$("#mail2").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#mail2message").removeClass().addClass('messagebox').text('Mail check').fadeIn("slow");
//check the username exists or not from ajax
$.post("register/mail_herhaal.php",{ mail:$('#mail').val(),mail2:$('#mail2').val() } ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#mail2message").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Je mail adressen zijn niet identiek').addClass('messageboxerror').fadeTo(900,1);
});
}
else if(data=='empty') //if username not avaiable
{
$("#mail2message").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Je moet wel wat invullen').addClass('messageboxerror').fadeTo(900,1);
});
} else
{
$("#mail2message").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Je email adrres zijn gelijk').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
$(document).ready(function()
{
$("#mail").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#mailmessage").removeClass().addClass('messagebox').text('Kijken in de database').fadeIn("slow");
//check the username exists or not from ajax
$.post("register/mail_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#mailmessage").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Deze mail is al ingebruik').addClass('messageboxerror').fadeTo(900,1);
});
}
else {
$("#mailmessage").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Mail naam is nog niet in gebruik').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
$(function(){
var MyFirstVar = '<?php echo $_POST["username"]; ?>' ;
$("#register_form").submit(function(){
//remove all the class add the messagebox classes and start fading
$("#aangemeldtekst").removeClass().addClass("messagebox_form").text("Account aan maken").fadeIn(1400);
//check the username exists or not from ajax
$.ajax({
type: "POST",
url: "register/ajax_register.php",
data: "user_name=" + $("#username").val() + "&pass=" + $("#pass").val() + "&pass2=" + $("#pass2").val() + "&mail=" + $("#mail").val() + "&mail2=" + $("#mail2").val() + "®els=" + $("#regels").val() + "&rand=" + Math.random(),
success: function(msg){
if(msg == "yes"){ //if correct login detail
$("#aangemeldtekst").fadeTo(200,0.1,function(){ //start fading the messagebox
//add message and change the class of the box and start fading
$(this).html("Je bent zojuist aangemeld "+MyFirstVar+" Activeer je mail").addClass("messageboxok_form").fadeTo(900, 1, function(){
//redirect to secure page
});
});
} else{
$("#aangemeldtekst").fadeTo(200, 0.1, function(){ //start fading the messagebox
//add message and change the class of the box and start fading
$(this).html("Je kon je niet aan melden probeer het opnieuw...").addClass("messageboxerror_form").fadeTo(900, 1);
});
}
}
});
return false; //not to post the form physically
});
//now call the ajax also focus move from
$("#register_form").blur(function(){
$("#register_form").trigger("submit");
});
});
</script>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.messagebox{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;
}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}
.messagebox_form{
position:absolute;
width:auto;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok_form{
position:absolute;
width:auto;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;
}
.messageboxerror_form{
position:absolute;
width:auto;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}
</style>
</head>
<body>
<form method="post" action="" id="register_form">
<p>Welkom op true-crime Zin om mee te spelen meld je nu aan. <small>Let er op er komt een activatie link naar je mail</small></p>
<div>
<span id="aangemeldtekst" style="display:none"></span>
<br><br><br>
</div>
<table >
<td width="200">User Name :</td> <td width="200"> <input name="username" type="text" id="username" value="" maxlength="15" /></td>
<td width="200"><span id="msgbox" style="display:none"></span></td>
</table>
<table >
<td width="200">Mail adres:</td> <td width="200"> <input name="mail" type="text" id="mail" value="" maxlength="90" /></td>
<td width="200"> <span id="mailmessage" style="display:none"></span></td>
</table>
<table >
<td width="200">Herhaal Mail:</td> <td width="200"> <input name="mail2" type="text" id="mail2" value="" maxlength="90" /></td>
<td width="200"> <span id="mail2message" style="display:none"></span></td>
</table>
<table >
<td width="200">Wachtwoord:</td> <td width="200"> <input name="pass" type="password" id="pass" value="" maxlength="15" /></td>
<td width="200"> <span id="passmessage" style="display:none"></span></td>
</table>
<table >
<td width="200">Herhaal Pass:</td> <td width="200"> <input name="pass2" type="password" id="pass2" value="" maxlength="15" /></td>
<td width="200"> <span id="herhaalmessage" style="display:none"></span></td>
</table>
<table >
<td width="400" align="left"><input name="regels" type="checkbox" id="regels" /> Accepteer de regels</td>
<td width="200"> <span id="regelbericht" style="display:none"></span></td>
</table>
<table>
<td col colspan="10" align="center"><input name="submit" type="submit" id="aanmelden_form" value="Maak account aan" /> </td>
</table>
</form>
Dit werkt;
