Apply for Zend Framework Certification Training

Jquery




Step 1  Create an registration from in Index.php

<!DOCTYPE>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Insert data using jquery</title>
	<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />
        <script type="text/javascript" src="jquery-1.6.3.min.js"></script>
	<script type="text/javascript" src="validation.js"></script>
</head>
<body>
	<div id="container">
		<h1>Registration form</h1>
		<form method="post" id="customForm" action="">
			<div>
				<label for="name">Name</label>
				<input id="name" name="name" type="text" />
				<span id="nameInfo"></span>
			</div>
			<div>
				<label for="email">E-mail</label>
				<input id="email" name="email" type="text" />
				<span id="emailInfo"></span>
			</div>
			<div>
				<label for="pass1">Password</label>
				<input id="pass1" name="pass1" type="password" />
				<span id="pass1Info"></span>
			</div>
			<div>
				<label for="pass2">Confirm Password</label>
				<input id="pass2" name="pass2" type="password" />
				<span id="pass2Info"></span>
			</div>
			<div>
				<input id="send" name="send" type="submit" value="Send" /> 
                <span id="msgbox" style="display:none"></span>
			</div>
		</form>
	</div>
	
</body>
</html>

Step 2 create an validation js 

$(document).ready(function(){
			var form = $("#customForm");//global vars
			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 message = $("#message");
			name.blur(validateName);	//On blur
			email.blur(validateEmail);
			pass1.blur(validatePass1);
			pass2.blur(validatePass2);
			name.keyup(validateName);//On key press
			email.keyup(validateEmail);
			pass1.keyup(validatePass1);
			pass2.keyup(validatePass2);
			message.keyup(validateMessage);
	//On Submitting
	$("#customForm").submit(function(){
				
		if(validateName() & validateEmail() & validatePass1() & validatePass2() & validateMessage())
		{
			$.post("process.php",
					{ name:$('#name').val(),email:$('#email').val()},
					function(data,status,xhr){},
					
				);
								//alert("data");
			return false;
							
		}else{
			return false;
		}
		
	
	});
	
    			
	//validation functions
	function validateEmail(){
		//testing regular expression
		var a = $("#email").val();
		var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
		if(filter.test(a))
		{	//if it's valid email
			email.removeClass("error");
			emailInfo.text("Valid E-mail please, you will need it to log in!");
			emailInfo.removeClass("error");
			return true;
		}else{//if it's NOT valid
			email.addClass("error");
			emailInfo.text("Type a valid e-mail please :");
			emailInfo.addClass("error");
			return false;
		}
	}
	function validateName()
	{	//if it's NOT valid
		if(name.val().length < 4){
			name.addClass("error");
			nameInfo.text("We want names with more than 3 letters!");
			nameInfo.addClass("error");
			return false;
		}else{//if it's valid
			name.removeClass("error");
			nameInfo.text("What's your name?");
			nameInfo.removeClass("error");
			return true;
		}
	}
	function validatePass1(){
		var a = $("#password1");
		var b = $("#password2");
		if(pass1.val().length <5){
			pass1.addClass("error");
			pass1Info.text("Ey! Remember: At least 5 characters: letters, numbers and '_'");
			pass1Info.addClass("error");
			return false;
		}else{			
			pass1.removeClass("error");
			pass1Info.text("At least 5 characters: letters, numbers and '_'");
			pass1Info.removeClass("error");
			validatePass2();
			return true;
		}
	}
	function validatePass2(){
		var a = $("#password1");
		var b = $("#password2");
		if( pass1.val() != pass2.val() ){
			pass2.addClass("error");
			pass2Info.text("Passwords doesn't match!");
			pass2Info.addClass("error");
			return false;
		}else{
			pass2.removeClass("error");
			pass2Info.text("Confirm password");
			pass2Info.removeClass("error");
			return true;
		}
	}
	function validateMessage()
	{
		if(message.val().length < 10){
			message.addClass("error");
			return false;
		}else{			
			message.removeClass("error");
			return true;
		}
	}
});

Step 3 create process.php file for insert of data

<?php
	mysql_connect("localhost","root","");
	mysql_select_db("angularjs");
	@extract(@$_POST);
	$name=$_POST['name'];
	$emailid=$_POST['email'];
	$ins="insert into users (name,email) values('$name','$emailid')";
	$mq=mysql_query($ins);
	echo "yes";
?>

step 4 create server side validation file

<?php
	function validateName($name)
	{
		
		if(strlen($name) < 4)
			return false;
		else
			return true;
	}
	function validateEmail($email)
	{
		return ereg("^[a-zA-Z0-9]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$", $email);
	}
	function validatePasswords($pass1, $pass2) 
	{
		if(strpos($pass1, ' ') !== false)
			return false;
		return $pass1 == $pass2 && strlen($pass1) > 5;
	}
	function validateMessage($message)
	{
		if(strlen($message) < 10)
			return false;
		else
			return true;
	}
?>

step 5 Include css file 
@CHARSET "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
	background: #fff;
	line-height:14px;
	font-size: 12px;
	font-family: Arial,  Verdana, Helvetica, sans-serif;
	margin:0pt;
	cursor:default;
	overflow: hidden;
}
html,body{
	height:100%;
	text-align: center;
}
.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}
a{
	text-decoration: none;
}
strong{
	font-weight: 700;
}
h1{
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2em;
	border-bottom: 1px dotted #6b9ef1;
	color: #5f95ef;
	margin-bottom: 1em;
}
#logo{
	margin-top: 1em;
	display: block;
}

#container{
	width: 600px;
	margin: 40px auto;
	text-align: left;
}
#customForm{
	padding: 0 10px 10px;
}
#customForm label{
	display: block;
	color: #797979;
	font-weight: 700;
	line-height: 1.4em;
}
#customForm input{
	width: 220px;
	padding: 6px;
	color: #949494;
	font-family: Arial,  Verdana, Helvetica, sans-serif;
	font-size: 11px;
	border: 1px solid #cecece;
}
#customForm input.error{
	background: #f8dbdb;
	border-color: #e77776;
}
#customForm textarea{
	width: 550px;
	height: 80px;
	padding: 6px;
	color: #adaeae;
	font-family: Arial,  Verdana, Helvetica, sans-serif;
	font-style: italic;
	font-size: 12px;
	border: 1px solid #cecece;
}
#customForm textarea.error{
	background: #f8dbdb;
	border-color: #e77776;
}
#customForm div{
	margin-bottom: 15px;
}
#customForm div span{
	margin-left: 10px;
	color: #b1b1b1;
	font-size: 11px;
	font-style: italic;
}
#customForm div span.error{
	color: #e46c6e;
}
#customForm #send{
	background: #6f9ff1;
	color: #fff;
	font-weight: 700;
	font-style: normal;
	border: 0;
	cursor: pointer;
}
#customForm #send:hover{
	background: #79a7f1;
}
#error{
	margin-bottom: 20px;
	border: 1px solid #efefef;
}
#error ul{
	list-style: square;
	padding: 5px;
	font-size: 11px;
}
#error ul li{
	list-style-position: inside;
	line-height: 1.6em;
}
#error ul li strong{
	color: #e46c6d;
}
#error.valid ul li strong{
	color: #93d72e;
}
.messagebox
{
	position:absolute;
	width:100px;
	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;
	
}

< How To Use Another sign Insteed of $ In Jquery Insert Data Using Php Mysql Jquery in Json Format >



Ask a question



  • Question: 
    {{questionlistdata.blog_question_description}}
    • Answer:
      {{answer.blog_answer_description  }}
    Replay to Question

(+91)-9910699802
Become A Member     Become A Teacher
Back to Top