Log In

Email:
Password:
Keep me logged in

Forgot Password

Email:




Archives
2013
March (7)
February (13)
January (14)
2012
December (12)
November (12)
October (12)
September (6)
August (12)
July (6)
June (12)
May (6)
April (12)
March (6)
February (12)
January (12)
2011
December (11)
November (14)
October (11)
September (4)
August (16)
July (8)
Categories
CSS (28)
jQuery (116)
PHP (52)
.htaccess (5)
iPod (1)
iPhone (16)
Sponsored Links


Live Validation
PHP Ajax Javascript jQuery
Browse Category | Friday, November 11, 2011 |

Description: Checks each input value for errors. If any, they will be displayed next to the input. Includes username, email, password, and password confirmation.







jQuery/Javascript:
register.php, where user would input each field
<html>
<head>
<script src="http://wcetdesigns.com/assets/javascript/jquery.js"></script>
<script>
//CHECKS ONE FIELD AT A TIME
$(function(){
$(".field").each(function(){
$(this).keyup(function(){
var id = $(this).attr("id"); //VALUE OF INPUT ID Ex: <input id="name">
var v = $(this).val(); //INPUT TEXT VALUE
var data = id+"="+v; //DATA TO GO TO THE AJAX FILE Ex:(name=wcet)

$.ajax({
type: "POST",
url: "validate.php", //AJAX FILE
data: data+"&single=true",
success: function(e){ //"e" IS THE DATA FROM "validate.php"
$("span#"+id).html(e); //ECHOS DATA FROM "validate.php" NEXT TO THE INPUT IF NEEDED
}
});
});
});
});
//SEPARATE FUNCTION FOR PASSWORDS BECAUSE THIS CHECKS TWO INPUTS AT ONCE FOR COMPARISON
function pass_match(pass, id){ //(password itself, id of input <input id="pass"> or <input id="pass2">)
//IF "id" IS ONE, GET THE ID AND VALUE OF THE OTHER INPUT FOR COMPARISON
if(id=='pass'){
other_id = "pass2"; //ID OF OTHER
other_pass = $('input#pass2').val(); //VALUE OF OTHER
} else {
if(id=='pass2'){
other_id = "pass"; //ID OF OTHER
other_pass = $("input#pass").val(); //VALUE OF OTHER
}
}
/*IF BOTH PASSWORS ARE NOT EMPTY
AND IF PASSWORDS DO NOT MATCH, DISPLAYS MESSAGE NEXT TO INPUT, ELSE CLEAR THE MESSAGE*/
if(pass&&other_pass){
if(pass!=other_pass){
$("span#"+id).html("Passwords don't match");
$("span#"+other_id).html(""); //CLEARS MESSAGE WHEN FOCUS IS BACK ON THIS INPUT
} else {
$("span#"+id).html("");
}
}
{
$("span#"+id).html("");
}
}
</script>
</head>
<body>
<table>
<tr><td align="right">
Username: </td><td align="left"><input class="field" id="username"> <span id="username"></span><br></td></tr>
<tr><td align="right">
Email: </td><td align="left"><input class="field" id="email"> <span id="email"></span><br></td></tr>
<tr><td align="right">
Password: </td><td align="left"><input id="pass" onBlur="pass_match(this.value, $(this).attr('id'))" type="password"> <span id="pass"></span><br></td></tr>
<tr><td align="right">
Confirm Password: </td><td align="left"><input id="pass2" onBlur="pass_match(this.value, $(this).attr('id'))" type="password"> <span id="pass2"></span></td></tr>
</table>
</body>
</html>
PHP/Ajax:
validate.php, where the username and email will be submitted for validation.
<?php

//THIS DATA WILL BE SHOWN IN THE JAVASCRIPT FUNCTION IN "index.php"

$name $_POST["username"];
$email $_POST["email"];
$strlen strlen($name); //NUMBER OF CHARACTERS
//EMAIL PATTERN
$validemail "^[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*@([a-zA-Z0-9_-]+\.)+([a-zA-Z]{2,}){1}$";

//CONDITIONS THAT WILL SHOW IN THE OTHER FILE
if($strlen>25){
    echo 
'Name too long.';
}
if(
$email){
    if(!
eregi($validemail$email)){
        echo 
'Invalid email';
    }
}

?>
 3    0
Views: 2,279 Downloads: 246




(Optional in case you want a reply)



6 Comments
what a shitty tutorial
sucks.

Wednesday, March 20, 2013 at 10:06:59 AM
ag
ag

Saturday, March 9, 2013 at 1:11:37 PM
dsadasdasdddddddddddddddd
ddddddddddddddddddddddddddddd

Wednesday, December 26, 2012 at 3:52:14 PM
dsadasdasdasddddddddddddd
dddddddddddddddddddddddddddd

Wednesday, December 26, 2012 at 3:51:55 PM
dsadasdasdasdsadsad
dsadsadsaddsdsadsa

Wednesday, December 26, 2012 at 3:51:47 PM
1 2 Next Last