Using Jquery to Validate Form Values from Database

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Using Jquery to Validate Form Values from Database

    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

    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

    HTML Code:
    <?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
    Last edited by Anthony; 16.01.13, 22:41.
    Tags: jquery, jquery submit, validate form with jquery
    #2
    it checks even if u dnt type anything

    Comment

      #3
      Originally posted by Pablo View Post
      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

      HTML Code:
      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

      Comment

        #4
        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!

        Comment

          #5
          Originally posted by Pablo View Post
          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........

          Comment

            #6
            Code:
            $('#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.

            Comment

            Previous template Next
            Working...
            X