Jump to content

How To Properly Submit a Form From A Jquery-PHP Validation Page?

echo9

By echo9
in PHP Coding Help

Recommended Posts

echo9 Newbie

echo9

Posted
Posted

hello everybody :)

 

i have recently modified a jquery-php validation form to make an employee registration form.. but am not able to do a couple of important things in the modified version where as in the original version of the page i was able to do the following:

 

1. submit the form and forwarding data only when the form is fully validated!

2. the form if empty submitted will not get submitted.

 

original form code:

<?php
require_once("validation.php");
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>yensdesign.com - Validate Forms using PHP and jQuery</title>
<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />
</head>
<body>
<a id="logo" title="Go to google.com!" href="http://www.google.com"><img src="css/images/logo.jpg" alt="google.com" /></a>
<div id="container">
	<h1>Registration process</h1>

	<?php if( isset($_POST['send']) && (!validateName($_POST['name']) || !validateEmail($_POST['email']) || !validatePasswords($_POST['pass1'], $_POST['pass2']) || !validateMessage($_POST['message']) ) ):?>
			<div id="error">
				<ul>
					<?php if(!validateName($_POST['name'])):?>
						<li><strong>Invalid Name:</strong> We want names with more than 3 letters!</li>
					<?php endif?>
					<?php if(!validateEmail($_POST['email'])):?>
						<li><strong>Invalid E-mail:</strong> Stop cowboy! Type a valid e-mail please </li>
					<?php endif?>
					<?php if(!validatePasswords($_POST['pass1'], $_POST['pass2'])):?>
						<li><strong>Passwords are invalid:</strong> Passwords doesn't match or are invalid!</li>
					<?php endif?>
					<?php if(!validateMessage($_POST['message'])):?>
						<li><strong>Ivalid message:</strong> Type a message with at least with 10 letters</li>
					<?php endif?>
				</ul>
			</div>
		<?php elseif(isset($_POST['send'])):?>
			<div id="error" class="valid">
			<script type="text/javascript">return true </script>
				<ul>
					<li><strong>Congratulations!</strong> All fields are OK </li>

				</ul>
			</div>

	<?php endif?>

	<form method="post" id="customForm" onsubmit="" action="forward.php">
		<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">E-mail</label>
			<input id="email" name="email" type="text" />
			<span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
		</div>
		<div>
			<label for="pass1">Password</label>
			<input id="pass1" name="pass1" type="password" />
			<span id="pass1Info">At least 5 characters: letters, numbers and '_'</span>
		</div>
		<div>
			<label for="pass2">Confirm Password</label>
			<input id="pass2" name="pass2" type="password" />
			<span id="pass2Info">Confirm password</span>
		</div>
		<div>
			<label for="message">Message</label>
			<textarea id="message" name="message" cols="" rows=""></textarea>
		</div>
		<div>
			<input id="send" name="send" type="submit" value="Send" />
		</div>
	</form>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="validation.js"></script>
</body>
</html>

 

Modified form page code:

<?php 
require_once("validation.php");

//function vad() {
//header('Location:addmember.php');
//}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Employee Registration Form | Online Job Portal - v.1.0</title>
<link href="innerstyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">

.errortext {
font-family: Verdana;
font-size: 11px;
color: #FF0000;
}

.bodytextarea {
font-family: Verdana;
font-size: 12px;
color: #000000;
float: left;
width: 560px;
margin: 3px;
padding: 3px;
}
#container{
width: 600px;
margin: 40px auto;
text-align: left;
position: relative;
}
#error{
margin-bottom: 20px;
border: 1px solid #efefef;
}
#error ul{
list-style: square;
padding: 5px;
font-size: 11px;
}

ul{
margin:0; 
padding:0; 
list-style-type:none;
font-size:0;
}
#error ul li{
list-style-position: inside;
line-height: 1.6em;
}
#error ul li strong{
color: #e46c6d;
}
strong{
font-weight: 700;
}
#customForm{
padding: 0 10px 10px;
}
#customForm div{
margin-bottom: 15px;
position: relative;
}
#customForm label{
display: block;
color: #797979;
font-weight: 700;
line-height: 1.4em;
}
#customForm input{
width: 142px;
padding: 6px;
height: 20px;
padding: 0px;
margin: 0px;
color: #949494;
font-family: Arial,  Verdana, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #cecece;
}
#customForm div span{
margin-left: 10px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
.style1 {
text-align: left;
}
.style2 {
text-align: center;
}
.style3 {
background-color: #99FF99;
}
.style4 {
}
.style5 {
background-color: #FFFF00;
}
</style>
<?php
require("employee_regid.php");
$empid=$id;
?>
<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />
<script type="text/javascript">
   /*function changeScreenSize(w,h)
     {
  	      	     top.resizeTo(w,h);
     }
    */
    function changeScreenSize(w,h) {
		if (parseInt(navigator.appVersion)>3) {
   		if (navigator.appName=="Netscape") {
   		top.outerWidth=w;
    	top.outerHeight=h;
   }
   else top.resizeTo(w,h);
}
}

    /*function pulsar(obj) 
    {
  		obj.value=obj.value.toUpperCase();
  	}
  	*/
</script>

</head>

<body onload="changeScreenSize(1024,768)">

<div id="body" style="height: 1743px; left: 0px; top: 0px;">
<!--left start -->
<!--left end -->
<!--mid start -->
<!--mid end -->
<!--tight start -->
<div id="left" style="height: 1786px; width: 702px; left: 0px; top: 0px;">
  <!--event start -->
    <div id="contact" style="height: 1805px; background-color: #D3E4DE; position: relative; left: 62px; top: -1px; width: 835px;" class="style12"><br />
    <h2 class="style2" style="width: 534px">
<img height="47" src="images/reg.png" style="left: -100px; top: -7px; visibility: visible; position: relative" width="49" />          Employee Registration Form</h2>
    <h5 class="style1" style="height: 95px"><span class="style4"><strong>Please fill up the form 
below to get unlimited free access to our job portal. While filling up the form below please bear in mind that the information 
provided has to be genuine in its nature and if not found so, the applicant 
is liable to serious offence on behalf of the company/firm in which he/she 
has applied for.</strong>                                                                                                                                                                                                                                                          ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></h5>
    <div class="style1" style="width: 590px"><span class="errortext">*</span> 
	<strong>indicates required fields<br />
   Please keep your Member ID in safe place. It is required in case of 
	help from site support.</strong><br></div>
    <div class="bodytextarea" style="width: 679px; height: 27px">
	<p style="width: 236px; outline: #FFFF00 dotted 3px; height: 29px; left: 30px; top: 0px;"> <span class="style3">Member ID:</span><input class="style3" disabled="disabled" name="mid" readonly="readonly" type="text" value="<?php echo $empid ?>"/>
	<br></p>
	</div>
<div id="container" style="left: -17px; top: -1px; width: 704px;">

	<?php if( isset($_POST['send']) && (!validateName($_POST['fname']) || !validateName0($_POST['lname']) || !validateEmail0($_POST['email0']) || !validatePasswords($_POST['pass1'], $_POST['pass2']) || !validatemno($_POST['mno']) || !validateexp($_POST['exp']) || !validatep12($_POST['p12']) || !validatep10($_POST['p10']) || !validateempadd($_POST['empadd']) || !validatecno($_POST['cno']) ) ):?>
			<div id="error">
				<ul>
					<?php if(!validateName($_POST['fname'])):?>
						<li><strong>Invalid Name:</strong> We want First names with more than 2 letters!</li>
					<?php endif?>
					<?php if(!validateName0($_POST['lname'])):?>
						<li><strong>Invalid Name:</strong> We want Last names with more than 2 letters!</li>
					<?php endif?>
					<?php if(!validatePasswords($_POST['pass1'], $_POST['pass2'])):?>
						<li><strong>Passwords are invalid:</strong> Passwords doesn't match or are invalid!</li>
					<?php endif?>
					<?php if(!validateEmail0($_POST['email0'])):?>
						<li><strong>Invalid E-mail:</strong> Valid E-mail please, you will need it to log in!</li>
					<?php endif?>
					<?php if(!validatemno($_POST['mno'])):?>
						<li><strong>Invalid contact number:</strong> Please put in a valid mobile number! Number has to be in 10 digits excluding '+91'</li>
					<?php endif?>
					<?php if(!validateexp($_POST['exp'])):?>
						<li><strong>Invalid experience count:</strong> Please put in a valid count of experience in years! e.g. '01 years'</li>
					<?php endif?>
					<?php if(!validatep12($_POST['p12'])):?>
						<li><strong>Invalid percentile value:</strong> Please put in your percentile in 12th Standard! (in integers only) e.g. '89'</li>
					<?php endif?>
					<?php if(!validatep10($_POST['p10'])):?>
						<li><strong>Invalid percentile value:</strong> Please put in your percentile in 10th Standard! (in integers only) e.g. '89'</li>
					<?php endif?>
					<?php if(!validateempadd($_POST['empadd'])):?>
						<li><strong>Invalid address:</strong> Please put in your Current address!</li>
					<?php endif?>
					<?php if(!validatecno($_POST['cno'])):?>
						<li><strong>Invalid contact number:</strong> Please put in a valid contact number! Number not to excede 13 digits excluding '+91'</li>
					<?php endif?>

				</ul>
			</div>
		<?php elseif(isset($_POST['send'])):?>
		<script type="text/javascript">vadi() 
			{ return true;
			}
		</script>
			<div id="error" class="valid">

				<ul>
					<li><strong>Congratulations!</strong> All fields are OK </li>
					<li></li>
				</ul>
			</div>
	<?php endif?>
	<form method="post" id="customForm" onsubmit="" action="addemp.php" style="height: 175px">
	<hr /><p class="style10" /> <p class="style10" style="left: -11px; top: 0px; width: 725px">
	<font face="Arial"><u>Login Credentials</u>:</font><br /><br />
	  <br />
		<div style="left: -6px; top: -21px; height: 1413px">
			<label for="email0">E-mail ID<font color="#FF0000" face="Arial">*</font></label>
			<input id="email0" name="email0" type="text" />
			<span id="emailInfo0">What is your valid email address? This will be your login ID!</span>
			<br />
			<br /><label for="pass1">Password<font color="#FF0000" face="Arial">*</font></label>
			<input id="pass1" name="pass1" type="password" />
			<span id="pass1Info">At least 6 characters: letters, numbers and '_'</span> <label for="pass2">Confirm Password<font color="#FF0000" face="Arial">*</font></label>
			<input id="pass2" name="pass2" type="password" />
			<span id="pass2Info">Confirm password</span> <br>
			<br />
	<hr style="width: 707px; position: relative; left: 14px; top: 5px;">
			<br />
			<u><font face="Arial">Academic/Industry related information</font></u><font face="Arial">:<br />
			<br />
			<label for="fname" style="left: 2px; top: -1px; width: 192px">
			First Name<font color="#FF0000" face="Arial">*</font></label>
			<input id="fname" name="fname" type="text" />
			<span id="fnameInfo">Please enter your First name..<br />
			<br />
			</span><label for="email1">Last Name<font color="#FF0000" face="Arial">*</font></label>
			<input id="lname" name="lname" type="text" />
			<span id="lnameInfo">Please enter your Last name..<br />
			<br />
			</span><label for="Qualifn">Basic Qualification<font color="#FF0000" face="Arial">*</font></label> <select size="1" name="Qualifn">
<option selected>Choose one</option>
<option>B.Engg.</option>
<option>B.Tech.</option>
</select>
			<span id="QualifnInfo">What is your Basic Qualification?<br />
			<br />
			</span><label for="email3">Stream<font color="#FF0000" face="Arial">*</font></label> <select size="1" name="D4">
<option selected>Choose one</option>
<option>Computer Science / Computing</option>
<option>Information Technology</option>
<option>Electronics & Telecomm</option>
<option>Mechanical</option>
</select>
			<span id="emailInfo4">What is your Graduation stream?</span>
			<br />
			<br />
			<label for="email2">Major (if any)</label>
			<input id="email2" name="email2" type="text" />
			<span id="emailInfo5">Any major qualification?<br />
			<br />
			</span>
			<label for="email3" style="left: 2px; top: -1px; width: 192px">
			Past Experience (count in years)<font color="#FF0000" face="Arial">*</font></label>
			<input id="exp" name="exp" type="text" style="width: 18px" />
			<span id="expInfo">What was your past experience count?<br><br />
			<br /></span><br />
			<label for="email3" style="left: 2px; top: -2px; width: 632px; font: normal normal bold 12px Arial, Helvetica, sans-serif">
			Previous/Current Job Position<font face="Arial" color="#FF0000"><label for="email3" style="width: 401px; left: 2px; top: -1px"> 
			(Please also describe if worked on any special projects on 
			deputation)</label></font></label><textarea rows="4" name="S1" cols="28"></textarea><br /><span id="jobpos">Not more than in 55 chars!</span><br />
			<br />
			<label for="p12">Percentile in 12th Standard<font color="#FF0000" face="Arial">*</font></label>
			<input id="p12" name="p12" type="text" style="width: 19px" />
			<span id="p12Info">What was your percentile in 12th Standard?<br />
			</span><label for="p10">Percentile in 10th Standard<font color="#FF0000" face="Arial">*</font></label>
			<input id="p10" name="p10" type="text" style="width: 19px" />
			<span id="p10Info">What was your percentile in 10th Standard?<br />
			<br />
			<br />
			</span>
	<hr style="width: 707px; position: relative; left: 14px; top: 5px;">
			<br />
			<u>Personal information</u>:<br />
			<br />
			<label for="gendertype">Gender<font color="#FF0000" face="Arial">*</font></label><span id="emailInfo11"><div id="layer1" style="position: static; width: 153px; height: 24px; z-index: 1; left: 5px; top: 956px; right: 535px">
				<font face="Arial">
				<input name="gender" style="width: auto; " type="radio" value="M" />Male           
				<input name="gender" style="width: auto; " type="radio" value="F" />Female<br />
				   <span id="genderInfo">Please choose one!<br />
				<br />
				<br />
				<br />
  </span></font></div>
			<br />
			<br />
			<label for="email7">Marital Status<font color="#FF0000" face="Arial">*</font></label> <select name="Select1">
	<option selected="selected">Choose one</option>
	<option value="Single">Single</option>
	<option value="Married">Married</option>
	<option>Not Necessary</option>
	</select>
			<span id="emailInfo14">Valid E-mail please, you will need it to log in!<br />
			<br />
			</span><label for="email8">Date-of-birth<font color="#FF0000" face="Arial">*</font></label>
			<font face="Times New Roman"> 
<select size="1" name="D2" class="style4">
<option selected>DD</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
</select><select size="1" name="D3" class="style4">
<option selected>MM</option>
<option>11</option>
<option>12</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
</select><select size="1" name="YYYY" class="style4">
<option>YYYY</option>
<option>1970</option>
<option>1971</option>
<option>1972</option>
<option>1973</option>
<option>1974</option>
<option>1975</option>
</select></font>
			<span id="emailInfo16">Valid E-mail please, you will need it to log in!<br />
			<br />
			</span><label for="email8">Current Address<font color="#FF0000" face="Arial">*</font></label>
			<input id="empadd" name="empadd" type="text" />
			<span id="empaddInfo">What is your Current address?<br />
			</span>
			<br />
			 <label for="email9">Current Location<font color="#FF0000" face="Arial">*</font></label>
			<font face="Times New Roman">
<select size="1" name="D5" class="style4">
<option selected>Choose City</option>
<option>Delhi</option>
<option>Chandigarh</option>
<option>Mumbai</option>
<option>Pune</option>
<option>Kolkatta</option>
<option>Chennai</option>
<option>Bangalore</option>
<option>Hyderabad</option>
</select>    If not there, enter: </font>
			<input id="email9" name="email9" type="text" />
			<span id="emailInfo20">Please select or write your current location city..<br />
			<br />
			</span><label for="email8">Mobile Number<font color="#FF0000" face="Arial">*</font></label><input id="mno" name="mno" type="text" value="+91" />
			<span id="mnoInfo">What is your Mobile contact number?</span><br />
 <span id="emailInfo23"><br />
			</span><label for="email8">Contact Number<font face="Arial" color="#FF0000"><label for="email3" style="width: 192px; font: normal normal bold 12px Arial, Helvetica, sans-serif"><label for="email3" style="width: 401px; left: 2px; top: -1px"> 
			<em>(landline/fixed telephone with STD code pre-fix)</em></label></label></font></label><input id="cno" name="cno" type="text" value="+91" />
			<span id="cnoInfo">What is your landline/fixed contact number?</span><br />
			<br />
			<label for="email3" style="left: 2px; top: -1px; width: 192px; font: normal normal bold 12px Arial, Helvetica, sans-serif">
			Hobbies (if any)</label><textarea rows="4" name="hob" cols="28"></textarea><br /><span id="hobInfo">Not more than in 55 chars!</span><br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
<fieldset style="color: #000000; border: 3px double #000000; padding: 2px; position: static; left: 53px; top: -133px; width: 662px;">
<legend align="center" style="top: 2px; width: 128px; left: 281px">
<span class="style5">Submit </span> <strong>
<span class="style5">Information?</span></strong></legend>
                                                         <input type="submit" id="send" value="  Yes, Submit    " name="send" style="background-color: #99FF99" />       
<input type="reset" value="No, Reset Form" name="B2" style="background-color: #FFCCFF" /></fieldset><br />
			<br />
			</span>
			<br />
			</font>
		</div>
	</form>
</div>
	<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="validation.js"></script></div>
</div>
<!--tight end -->
<br class="spacer" />
</div>

</body>

</html>

 

other codes which you may require to debug..

 

1. validation.php

2. validation.js

3. jquery.js

 

they are attached.

 

so anybody please help me out..  :confused:

 

[attachment deleted by admin]

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.