Form Validation

Form Validation with cookies

Page 1 of 1

2 Replies - 3743 Views - Last Post: 26 April 2009 - 07:38 PM

#1 velaphi  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 20-July 08

Form Validation

Post icon  Posted 09 March 2009 - 05:17 AM

Hi, I want this rigistration form to store cookies, after that alert message should write thank you for registering. If user attempts to register second time with the same name, display a confirm dialog box asking if he/she wants to register again.

<html>
<head>
<title>Hotel Reservation</title>
<script type="text/javascript">

function reserveForm() {
var myDate = new Date();
myDate.setDate(myDate.getDate() + 1);
var inDate = new Date();
var outDate = new Date();
document.cookie = encodeURI("first_name=" + document.forms[0].firstname.value)
+ ";expires=" + myDate.toUTCString();
document.cookie = encodeURI("last_name=" + document.forms[0].lastname.value)
+ ";expires=" + myDate.toUTCString();
document.cookie = encodeURI("address1=" + document.forms[0].address1.value)
+ ";expires=" + myDate.toUTCString();
document.cookie = encodeURI("address2=" + document.forms[0].address2.value)
+ ";expires=" + myDate.toUTCString();
document.cookie = encodeURI("city=" + document.forms[0].city.value)
+ ";expires=" + myDate.toUTCString();
document.cookie = encodeURI("province=" + document.forms[0].province.value)
+ ";expires=" + myDate.toUTCString();
document.cookie = encodeURI("code=" + document.forms[0].code.value)
+ ";expires=" + myDate.toUTCString();
document.cookie = encodeURI("phone=" + document.forms[0].phone.value)
+ ";expires=" + myDate.toUTCString();
document.cookie = encodeURI("fax=" + document.forms[0].fax.value)
+ ";expires=" + myDate.toUTCString();
document.cookie = encodeURI("badge=" + document.forms[0].badge.value)
+ ";expires=" + myDate.toUTCString();
}
var registrationCheck = decodeURI(document.cookie);
var regValue = registrationCheck.split("; ");
{
var registrationAgain = window.confirm("You have already registered! Do you wish to register Again?");
{
if (registrationAgain == false)
alert("Thank you for Registering");
document.close();
}
}
</script>
</head>
<body>
<h1>Conference Registration</h1>
<h2>Name and Address</h2><br />

<form action="" onsubmit="reserveForm();" > 

<p>First Name  &nbsp<input type="text" name="firstname" />
Last Name &nbsp; <input type="text"  name="lastname" /></p>
<p>Street Address 1 &nbsp; <input type="text"  name="address1" size="50" /></p>
<p>Street Address 2 &nbsp; <input type="text  name="address2" size="50" /></p>
<p>City &nbsp; <input type="text"  name="city"  size="30" />
Province &nbsp; <input type="text"  name="province"  size="5" /> Code &nbsp;
<input type="text"  name="code"  size="10" /></p>
<p>Phone &nbsp; <input type="text"  name="phone" /> Fax &nbsp; <input name="fax"  /></p>
<p>Name as you would like it to appear on your badge &nbsp; <input type="text"  name="badge" size="30" /></p>
<p><input type="submit" value="Submit") /></p>
</form>
</body>
</html>



This post has been edited by velaphi: 09 March 2009 - 01:29 PM


Is This A Good Question/Topic? 1

Replies To: Form Validation

#2 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Form Validation

Posted 10 March 2009 - 06:41 AM

Because cookies are stored on the client machine rather than the server, this technique will only prevent duplicate registrations if they come from the same machine and if the user doesn't clear their cookies. Something like this should really use server-side interaction and a database.

That said, let's have a look.

First off, there are two little html errors: The &nbsp; on the first name line is missing it's semi-colon and there's a missing speech mark on the address 2 line.

Now that those are out of the way, lets look at the javascript. I've broken it all down into multiple functions to make the logic bit clearer. The createCookie and readCookie functions do exactly as they say on the tin, and were taken from here: http://www.quirksmod...js/cookies.html. The clearOld function resets your cookies before overwriting them, and storeInfo puts the form values into the cookies.

Now to the reserveForm function... First, it checks to see if the first_name and last_name cookies match the new form values. If they do, the user is asked for confirmation to overwrite the values, otherwise the values are saved as cookies.

The next if statement checks to see if the previous if statement actually stored the form info by checking for the existence of the notReg variable. It also checks the value of registrationAgain, and stores the new values if required.

<html>
<head>
<title>Hotel Reservation</title>
<script type="text/javascript">

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function clearOld() {
	createCookie("first_name","",-1);
	createCookie("last_name","",-1);
	createCookie("address1","",-1);
	createCookie("address2","",-1);
	createCookie("city","",-1);
	createCookie("province","",-1);
	createCookie("code","",-1);
	createCookie("phone","",-1);
	createCookie("fax","",-1);
	createCookie("badge","",-1);
}

function storeInfo() {
	createCookie("first_name",document.forms[0].firstname.value,1);
	createCookie("last_name",document.forms[0].lastname.value,1);
	createCookie("address1",document.forms[0].address1.value,1);
	createCookie("address2",document.forms[0].address2.value,1);
	createCookie("city",document.forms[0].city.value,1);
	createCookie("province",document.forms[0].province.value,1);
	createCookie("code",document.forms[0].code.value,1);
	createCookie("phone",document.forms[0].phone.value,1);
	createCookie("fax",document.forms[0].fax.value,1);
	createCookie("badge",document.forms[0].badge.value,1);	
}


function reserveForm() {
		
	if(readCookie("first_name") == document.forms[0].firstname.value && readCookie("last_name") == document.forms[0].lastname.value) {
		var registrationAgain = window.confirm("You have already registered! Do you wish to register Again?");	
	} else {
		var notReg = true;
		storeInfo();
		alert("Thank you for Registering");
	}
	
	if(!notReg && registrationAgain) {
		clearOld();
		storeInfo();
		alert("Thank you for Registering");	
	} else if(!notReg && !registrationAgain) {
		alert("Your details have not been stored");
	}
	
}
</script>
</head>
<body>
<h1>Conference Registration</h1>
<h2>Name and Address</h2><br />

<form action="" onsubmit="reserveForm();" >

<p>First Name  &nbsp;<input type="text" name="firstname" />
Last Name   <input type="text"  name="lastname" /></p>
<p>Street Address 1   <input type="text"  name="address1" size="50" /></p>
<p>Street Address 2   <input type="text"  name="address2" size="50" /></p>
<p>City   <input type="text"  name="city"  size="30" />
Province   <input type="text"  name="province"  size="5" /> Code  
<input type="text"  name="code"  size="10" /></p>
<p>Phone   <input type="text"  name="phone" /> Fax   <input name="fax"  /></p>
<p>Name as you would like it to appear on your badge   <input type="text"  name="badge" size="30" /></p>
<p><input type="submit" value="Submit") /></p>
</form>
</body>
</html>


This post has been edited by thehat: 10 March 2009 - 06:43 AM

Was This Post Helpful? 1

#3 gday21  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 26-April 09

Re: Form Validation

Posted 26 April 2009 - 07:38 PM

When I use this rigistration form to store cookies, after that alert message pops up the user has to attempt to register twice with the same name, before the page asking if he/she wants to register again pops up. They should only have to register once more.

<h1><b><center>Contact Information</center></b></h1>
<script type'text/javascript'>

function formValidator(){
	//Make quick references to our fields
	var firstname = document.getElementById("firstname");
	var lastname = document.getElementById("lastname");
	var addr = document.getElementById("address");
	var city = document.getElementById("city");
	var zip = document.getElementById("zip");

	//Check each input in the order that is appears in the form!
	if(isAlphabet(firstname, "Please enter only letters for your First name")){
		if(isAlphabet(lastname, "Please enter only letters for your Last name")){
			if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
				if(isAlphabet(city, "Please enter only letters for your City")){
					if(isNumeric(zip, "Please enter a valid zip code")){
						return true;
					}
				}
			}
		}
	}

return false;

}

function notEmpty(elem, helperMsg){
	if(elem.value.length == 0){
	alert(helperMsg);
	elem.focus(); // set the focus to this input
	return false;

	}

	return true;
}

function isNumeric(elem, helperMsg){
	var numericExpression = /^[0-9]+$/;
	if(elem.value.match(numericExpression)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function isAlphanumeric(elem, helperMsg){
	var alphaExp = /^[0-9a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}


</script>
<script type="text/javascript">

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function clearOld() {
	createCookie("first_name","",-1);
	createCookie("last_name","",-1);
	createCookie("address","",-1);
	createCookie("city","",-1);
	createCookie("zip","",-1);
	

}

function storeInfo() {
	createCookie("first_name",document.forms[0].firstname.value,1);
	createCookie("last_name",document.forms[0].lastname.value,1);
	createCookie("address",document.forms[0].address.value,1);
	createCookie("city",document.forms[0].city.value,1);
	createCookie("zip",document.forms[0].zip.value,1);
	  
	
}


function reserveForm() {
		
	if(readCookie("first_name") == document.forms[0].firstname.value && readCookie("last_name") == document.forms[0].lastname.value) {
		var registrationAgain = window.location("finished.html");	
	} else {
		var notReg = true;
		storeInfo();
		alert("finished.html");
	}
	
	if(!notReg && registrationAgain) {
		clearOld();
		storeInfo();
		alert("finished.html");	
	} else if(!notReg && !registrationAgain) {
		alert("Your details have not been stored");
	}
	
}
</script>

<body onload="reserveForm();"> 

<FORM action='Conformation.html' method='get' onsubmit='return formValidator(0)'>
FirstName: <input type="text" id="firstname"/><br/>
LastName: <input type="text" id="lastname"/><br/>
Address: <input type="text" id="address"/><br/>
City: <input type="text" id="city"/><br/>
Zip: <input type="text" id="zip"/><br/>
<input type="Submit" Value="Submit"/>
</FORM>
</body>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1