Form validation

Hey, I have my form working, just now need to get validation of the fields. Most of what I see on the web is using tables and I opted to not. So… the registration form is here

The code is below but want to figure out where to put the error message. I don’t have a lot of room (and don’t want it). Any help would be greatly appreciated.

<?php
	session_start();
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>SACCC Form</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css" media="screen">
  	@import "css/main.css";
/*  	@import "css/registration.css";*/
	@import "css/top-positioned-labels.css";
   .mWaiver {
      width: 100%;
      margin-left: -50%;  
      padding: 0;
      margin: 0;
   }
  </style>
</head>
<body>
<?php

$task = isset($_POST['task']) ? $_POST['task'] : false;

var_dump($_POST);

switch ($task) {

	case 'Register':
		// user cancelled
		echo 'Registering';
		// redirect to cancel page?
		header ('Location: mail.php');
	break;
	
	case 'Return to main page':
		// user saved and wants to exit
		echo 'Returning to home page';
		// so lets go somwhere else ?
		header('Location: index.php');
	break;
	
//	case 'Save and Continue':
		// user saved and wants to continue
//		echo 'Updated...';
		// show form again then...
//		showForm();
//	break;
	
	default:
		// nothing selected.. show form
		showForm();
	break;
}

function showForm() { ?>

  <div id="page">
		<div id="header">
			<h1>
				SACCC Registration Form
			</h1>
         <p style="margin-top: -35px; color:#FFF;">All items marked with an asterisk (*) are required.</p>
		</div>
		<div id="content">
      <form action="mail.php" method="post">
			<fieldset>
					<legend>
						<span>Contact Details</span>
					</legend>
					<ol>
						<li>
							<label for="name">
								* Name:
							</label>
							<input id="name" name="name" class="text" type="text" />
						</li>
						<li>
							<label for="email">
								* Email address:
							</label>
							<input id="email" name="email" class="text" type="text" />
						</li>
						<li>
							<label for="phone">
								Telephone:
							</label>
							<input id="phone" name="phone" class="text" type="text" />
						</li>
					</ol>
				</fieldset>         
            <fieldset>
            	<legend>
               	<span>Vehicle Information</span>
               </legend>
               <ol>
               	<li>
                  	<label for="VehicleYr">
                     	* Vehicle Year:
                     </label>
                      <input id="VehicleYr" name="VehicleYr" class="text" type="text" size="4" maxlength="4"/>
                  </li>
                  <li>
                  	<label for="VehicleMkMdl">
                     	* Vehicle Make, Model
                     </label>
                      <input id="VehicleMkMdl" name="VehicleMkMdl" class="text" type="text" size="65"/>
                  </li>
               </ol>
            </fieldset>
                     
				<fieldset class="clearleft">
					<legend>
						<span>Delivery Address</span>
					</legend>
					<ol>
						<li>
							<label for="address1">
								* Address 1:
							</label>
							<input id="address1" name="address1" class="text" type="text" />
						</li>
						<li>
							<label for="address2">
								Address 2:
							</label>
							<input id="address2" name="address2" class="text" type="text" />
						</li>
						<li>
							<label for="city">
								* City:
							</label>
							<input id="city" name="city" class="text" type="text" />
						</li>
						<li>
							<label for="state">
								* State:
							</label>
							<input id="state" name="state" class="text" type="text" />
						</li>                  
						<li>
							<label for="zipcode">
								* Zip code:
							</label>
							<input id="zipcode" name="zipcode" class="text textSmall" type="text" />
						</li>

					</ol>
				</fieldset>

<!--				<fieldset class="alt">
					<legend>
						<span>Payment Details</span>
					</legend>
					<ol>
						<li>
							<label for="cardNumber">
								Credit card number:
							</label>
							<input id="cardNumber" name="cardNumber" class="text" type="text" />
						</li>
						<li>
							<label for="cardName">
								Credit card name:
							</label>
							<input id="cardName" name="cardName" class="text" type="text" />
						</li>
					</ol>
				</fieldset>             -->
				<fieldset class="mWaiver">
            	<legend>
               	<span>HOLD HARMLESS AGREEMENT</span>
<!--               	<span>Declaration of Waiver</span>-->
               </legend>
                <ol>
<!--                   <li><label>I/we hereby release the Spokane Area Classic Chevy Club, it's members and officers, and the Town of Millwood and Millwood Park from all liability for all personal injuries, losses, and damage to property caused by or arising from the event described herein. I/we execute this waiver voluntarily and with full knowledge of it's significance.</label>
                   </li>-->
                   <li><label>
I hereby agree to abide by all of the directions and decisions of the Spokane Area Classic Chevy Club. I hereby agree to indemnify, hold harmless and defend, the City Millwood, Washington, Millwood Parks Department, Spokane Area Classic Chevy Club, their respective
members, officers, directors, agents, and employees from and against any and all liabilities, damages, actions, costs, losses, claims and expenses (including attorneys fees), on account of personal injury, death or damage to or loss of property or profits arising out of or resulting in whole or in part from any act, ommission, negligence, fault or violation of law or ordinence by me or my agents, sub-contractors, invitees or any other person entering the event and/or event area with my implied or express permission.<br />
In CONSIDERATION of the acceptance of the application for entry into the activities listed on the application form above this agreement and the rules and regulations that accompanied it, I hereby WAIVE, RELEASE, and DISCHARGE any and all claims for the damages for death, personal injury, or property damage which I may have, or which may hereafter accrue to me as a result of my participation in the said activities. This release is intended to discharge, in advance, the City of Millwood, Millwood Parks Department, Spokane Area Classic Chevy Club, its officers, agents, and employees from and against any and all liability arising out of or connected with my participation in the said activities, even though that liability may arise out of NEGLIGENCE or CARELESSNESS, on the part of the persons or entities mentioned above<br />
I HAVE READ THE DESCRIPTION OF THE ACTIVITY FOR WHICH I HAVE APPLIED, AND I AM AWARE THAT THESE ACTIVITIES
SUBJECT ME TO PHYSICAL RISKS AND DANGERS. NEVERTHELESS, I VOLUNTARILY AGREE TO ASSUME ANY AND ALL RISKS OF INJURY OR
DEATH, AND TO RELEASE, DISCHARGE, AND HOLD HARMLESS ALL OF THE ENTITIES OR PERSONS MENTIONED ABOVE WHO, THROUGH
NEGLIGENCE OR CARELESSNESS, MIGHT OTHERWISE BE LIABLE TO ME, OR MY HEIRS, PERSONAL REPRESENTATIVES, NEXT OF KIN,
SPOUSE OR ASSIGNS. It is understood and agreed that this waiver, release, and assumption of risk is to be binding on my HEIRS, PERSONAL
REPRESENTATIVES, NEXT OF KIN, SPOUSE and ASSIGNS. I have carefully READ this Agreement and fully UNDERSTAND its content.<br />
I hereby give the Spokane Area Classic Chevy Club permission to use photographs and/or likenesses of my car without limitation and without compensation to me.
                   <li>
                   <label for="waiverAgree"><em> * </em><input id="waiverAgree" name="waiverAgree" class="checkbox" type="checkbox" value="1" />	
                   I/we have read the above agreement and agree to its terms 
                   </label>
   <!--                <label for="waiverAgree"> I/we have read the waiver and agree to its terms</label>-->
                  </li>
              
										<label for="earlyPay"><em> * </em><input id="earlyPay" name="earlyPay" class="checkbox" type="checkbox" value="1" />
										
											I/we agree to pay the registration fee of $10.00 upon arrival at the show.
										</label>
									
                  </ol>
            </fieldset>
 <!--           <fieldset class="submit">  -->
<!--					<input name="task" type="submit" value="Register" />
               <input name="task" type="submit" value="Return to main page" />-->
<!--				</fieldset>  -->

	
	<span style="padding-left:10px; margin-left: 5%; float:left;"><input type="submit" name="task" value="Register" /></span>
	

	
	<span style="padding-left: 10px; margin-left: 5%; float:left; "><input type="submit" name="task" value="Return to main page" /></span>
			</form>
         
         <?php	} ?>
		</div>
	</div>
</body>
</html>

Some visual demo might help to give a better answer because not sure what going to feet in. Or i would say use jquery.validation script to validate your form. Probably it will handle your error message spacing issue.

Or i would suggest create div after each input element to show error massages Or on top of the form generalize div to show error message in quite general solution.

Do you mean you need help writing the validation code? Or do you want some advice about where to display the error messages on your page?

Anyway, right now, you’re sending the form directly to mail.php, so putting any validation in Registration2.php makes no sense. Put the validation in mail.php, or send the form back to Registration2.php.

tejash, there is a link to the page for the real form. Not sure what or how to do your second suggestion. Please help out with that.

guido2004, yes, to both but not so much to the writing of the code. I think I can do that but will ask for more help if I get into something I can’t figure out. As to the second question, yes, where can I put it seeing as I designed the form for one page viewing and, well, the real estate is not condusive to what I think the error messages should be.

Point taken on the passing to mail.php just not sure how to validate it in there then send back to the form the correct information along with error messages.

So, if you need more information, please let me know. I just want to get the validation done so as to complete this soon.

Thanks for your help and advice.
F

The form fields enter well inside my window, and there’s lots of space to put the error messages.
The entire page (including the text and the buttons at the end) doesn’t fit in my window already, so adding some error messages won’t change much IMO.

Point taken on the passing to mail.php just not sure how to validate it in there then send back to the form the correct information along with error messages.

You might consider sending the form to the same script that displays it. Do the validation there, and display any errors as you see fit. If all is ok, save the needed data in a session and redirect to the mail.php script.

Hi fredep57,

I think you can do two kind of validation. 1) is java script validation (client side) . I will suggest for that user jquery.validate. Its quite easy to use. check demo on jQuery validation plug-in - main demo. And if its successfully validated than submit form to mail.php.

  1. Do server side validation in mail.php. If there is any errors than redirect to from with error messages. And display error messages on top of the form in list. I would say its easiest way.