Using Jquery to Validate Form Values from Database

[shushant]

$('#formid').on('click',function(){
var obj = $(this);// will hold id #formid
var user = obj.find('#user').val();// will take value from input
var pass = obj.find('#pass').val();
if($.trim(user) == '')) $('#error').html('user name is requird');
else if($.trim(pass) == '')) $('#error').html('password  is requird');
else{
$('error').fadeOut('fast');// hide the error element
//rest of code here
}
});

altenative

https://github.com/jzaefferer/jquery-validation

example Bootstrap Registration Form Tutorial.

[Anthony]

i was only telling u what happens what happens wen u dnt enter anything thats all if u click into the input field and dnt enter anything n click out the error msg comes up thats ....but thanx stillz!

I understand what you were telling me that was why i said you could add your own function which checks if the input field was blank. Anyway i already updated the code and added the function for you since i didn't think you would have figure it out since you are not familiar with Jquery........

[Pablo]

i was only telling u what happens what happens wen u dnt enter anything thats all if u click into the input field and dnt enter anything n click out the error msg comes up thats ....but thanx stillz!

[Anthony]

it checks even if u dnt type anything

This is the Basic of the code which will allow you to validate if a value exist in the database using Jquery. You need to add your own function which will check if the user has entered and input into your desired box which will be easy to do using Javascript......

you can add a simple function like this which will check if the user has entered a value in the box

var username = $('#username').val();

	if(username == '' || username.length < 0){

       alert("Username is Required.");

	$('#username').removeClass("check");

         
	}

*Since i don't think you fully understand Jquery I have updated the code so you can get a better idea of how things work and added the function which will check if the user has entered some info in the box before it checks the database

[Pablo]

it checks even if u dnt type anything

[Anthony]

Hey this script allows you to check if a value exist in a Database before form is submitted using Jquery


1: First create "form.php" or "form.html" and insert this code or your desired code

<html>
<title>Check Username Demo</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>




<script language="javascript">

$(document).ready(function()
{




	$("#username").blur(function()
	{


var username = $('#username').val();

	if(username == '' || username.length < 0){

       alert("Username is Required.");

	$('#username').removeClass("check");

         
	}


else{

$("#alert").removeClass().addClass('check').text('Checking If User Exist...').fadeIn("slow");

}


$.post("check_user.php",{ username:$(this).val() } ,function(data)




{



		  if(data=='no')
		  {
		  	$("#alert").fadeTo(200,0.1,function()
			{ 
			  



			  $(this).html('Username Already exists').addClass('error').fadeTo(900,1);




			});		
          
}
		   if(data=='yes')
		  {
		  	$("#alert").fadeTo(200,0.1,function() 
			{ 
			  
			  $(this).html('UserName available to register').addClass('ok').fadeTo(900,1);	
			});
		  }

				
        });
 
	});
});



</script>

<style type="text/css">

.check{
	position:absolute;
	width:auto;
	margin-left:30px;
	border:1px solid #c93;
	background:#ffc;
	padding:3px;
}
.ok{
	position:absolute;
	width:auto;
	margin-left:30px;
	border:1px solid #349534;
	background:#C9FFCA;
	padding:3px;
	font-weight:bold;
	color:#008000;
	
}
.error{
	position:absolute;
	width:auto;
	margin-left:30px;
	border:1px solid #CC0000;
	background:#F7CBCA;
	padding:3px;
	font-weight:bold;
	color:#CC0000;
}

</style>

<br/><br/><br/><center>Check if username exist in database using <b>Jquery</b></center><br/><br/>

<center><b>NOTE:</b> Just enter any random name to check if the name exist<br/><br/><br/></center>

<center>Registered name : <b>Anthony</b><br/></center>

<center><p><h2>UserName:</h2>

<input name="username" type="text" id="username" style="padding:2px; border:4px solid #ADD8E6; width:280px; height:44px; font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;"><span id="alert" style="display:none"></span></p><br/><br/>

<input name="" type="submit" value="Click Here" style="padding:2px; border:1px solid #FF0000; width:180px; height:24px; font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;"><br/><br/><br/></center>



<center>Demo Provided By: <a href="http://www.gtriddim.com" target="_blank">www.gtriddim.com</a><br/><br/></center>


</html>

2: Next create a file which will validate the user inputted values with your database, here i called this file "check_user.php" but you can call it whatever you want

<?php


include ('config.php'); 



$user_name=htmlspecialchars($_POST['username'],ENT_QUOTES);



$rs_duplicates = mysql_query("select username from users where username ='$user_name'");

	$duplicates = mysql_num_rows($rs_duplicates);

	

	
if($user_name == '')

{

echo "UserName is Required";

exit();

}


	if ($duplicates > 0)

	{	

	

	



	echo "no";

} 

else if ($duplicates < 1)

	{

echo "yes";

}


?>

Working Demo Here: http://www.gtriddim.com/api/demo.php

Thats it