hey guys,
I am trying to work on that code which will validate any name that are typing in name's registeration box and I have included php file which will connect to the mysql database,I tried to run the code but it doesn't work as I try to typing a name that exists in database it says it's registered,but when I tried to type any other name that doesn't exist should appear name available but it doesn't..I don't know what's wrong with my code
That's my index.php file:
<html>
<head>
<link type="text/css" href="general.css" rel="stylesheet" />
<link type="text/css" href="jqueryui/jqueryui-ui.theme.min.css" rel="stylesheet" />
<link rel="stylesheet" href="jqueryui/jquery-ui.min.css">
<script src="jqueryui/external/jquery/jquery.js"></script>
<script src="jqueryui/jquery-ui.min.js"></script>
<script type="text/javascript" src="validation.js"></script>
</head>
<body>
<div id="container">
<form id="customForm">
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text" />
<span id="nameInfo">what's your name?</span>
</div>
<div>
<label for="email">Email</label>
<input id="email" name="email" type="text" />
<span id="emailInfo">Please type a valid Email...</span>
</div>
<div>
<label for="pass1">Password</label>
<input id="pass1" name="pass1" type="password" />
<span id="pass1Info">Type a password with more than 5 char</span>
</div>
<div>
<label for="pass2">Confirm Password</label>
<input id="pass2" name="pass2" type="password" />
<span id="pass2Info">Please confirm password...</span>
</div>
<div>
<input id="send" name="send" type="button" value="Send" />
</div>
</form>
</div>
</body>
</html>
that's also my validation.js file:
$(document).ready(function(){
var form = $("#customForm");
var name = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var pass1 = $("#pass1");
var pass1Info = $("#pass1Info");
var pass2 = $("#pass2");
var pass2Info = $("#pass2Info");
var state = false;
name.keyup(validateName);
function validateName(){
//if it's NOT valid
if(name.val().length <= 4){
name.removeClass("valid");
nameInfo.removeClass("valid");
name.addClass("error");
nameInfo.addClass("error");
nameInfo.text("we want names with more than 4 letters!");
state = false;
}else{
if(name.val().length > 4){
var uname=name.val();
$.post('validate.php',{names:uname}, function(data){
if(data!=0){
name.removeClass('valid');
nameInfo.removeClass('valid');
name.addClass("error");
nameInfo.addClass("error");
nameInfo.text("This name is already registered!");
state = false;
}else{
name.removeClass('error');
nameInfo.removeClass('error');
name.addClass("valid");
nameInfo.addClass("valid");
nameInfo.text("Name available");
state = true;
}
});
}
}
return state;
}
function validateEmail(){
}
});
that's my validate.php file:
<?php
$name = &$_POST['names'];
$email = &$_POST['emails'];
if($name!=""){
mysql_connect("localhost","root","") or die("we couldn't connect!");
mysql_select_db("final");
$username = mysql_query("SELECT name FROM users WHERE name='$name'");
$count = mysql_num_rows($username);
if($count !=0){
echo 1;
}else{
echo 0;
}
}
if($email!=""){
mysql_connect("localhost","root","") or die("we couldn't connect!");
mysql_select_db("final");
$useremail = mysql_query("SELECT email FROM users WHERE email='$email'");
$countemail = mysql_num_rows($useremail);
if($countemail !=0){
echo 1;
}else{
echo 0;
}
}
?>
and that's my general.css file:
#container{
font-family:Arial;
font-size:10px;
}
#customForm label{
display:block;
color:#797979;
}
#customForm input{
width: 220px;
padding:6px;
color:#949494;
font-family:Arial;
font-size: 10px;
border: 1px solid #cecece;
}
#customForm input.error{
background: #f8dbdb;
border-color: #e77776;
}
#customForm input.valid{
background: #99ff99;
border-color: #green;
}
#customForm div{
margin-bottom: 10px;
}
#customForm div span{
margin-left:10px;
color:#b1b1b1;
font-size:10px;
font-style: italic;
}
#customForm div span.error{
color:red;
}
#customForm div span.valid{
color: green;
}
#customForm #send{
background:#6f9ff1;
color: #fff;
font-weight: 700;
font-style: normal;
cursor: pointer;
}
#customForm #send:hover{
background: #79a7f1;
}