php

Working with Forms

Using validation with Forms

In the example, we created a form that accepts user input, but nothing stops the user to enter incorrect value in the form fields. User may enter invalid email id, e.g. email that does not contains @/. etc. In such a scenario the information coming to server is incorrect and incomplete.

To keep the information correct, validations are used. Validation assures that the we have already filtered the unwanted values, and we can now assume that, the information available on the server side is accurate. Validation is necessary to insure the quality, accuracy and desirability of data. With validation we can force the user to enter valid value in the respective form fields so that user does not attempt to submit incomplete form.

There are two types of validation:

1. Server side validation this type of validation uses server-side technologies such as ASP, JSP or PHP and validation is performed on the server.

2. Client side this type of validation runs on client browser and user client side technologies such as Javascript. This type of validation entirely runs on client browser hence reduces the processing load on the server and increases server response time.

Note: This chapter assumes that you've a sound understanding of Javascript. If you to learn Javascript, please refer to our Javascript tutorial at http://education.ebizel.com.

Improved Feedback form with Client side validation

Unlike the previous example which was divided in 2 parts, this example is divided in three parts:

1. HTML Form
2. Client Side JavaScript
3. PHP script to process the information

Part 3, the PHP script is same as the previous example. Part 1 the HTML is same with minor changes in the form declaration. Part 2, the Client side JavaScript force the user to enter data in all mandatory form fields.

The JavaScript

<?php
if (!isset($_POST['submit'])) {
?>
<script language = "Javascript">


function emailcheck(email) {

		var at="@"
		var dot="."
		var lat=email.indexOf(at)
		var lstr=email.length
		var ldot=email.indexOf(dot)
		if (email.indexOf(at)==-1){
		   alert("Invalid E-mail ID")
		   return false
		}

		if (email.indexOf(at)==-1 |
| email.indexOf(at)==0 || email.indexOf(at)==lstr){
		   alert("Invalid E-mail ID")
		   return false
		}

		if (email.indexOf(dot)==-1 || 
email.indexOf(dot)==0 || email.indexOf(dot)==lstr){
		    alert("Invalid E-mail ID")
		    return false
		}

		 if (email.indexOf(at,(lat+1))!=-1){
		    alert("Invalid E-mail ID")
		    return false
		 }

		 if (email.substring(lat-1,lat)==dot || email.substring(lat+1,lat+2)==dot){
		    alert("Invalid E-mail ID")
		    return false
		 }

		 if (email.indexOf(dot,(lat+2))==-1){
		    alert("Invalid E-mail ID")
		    return false
		 }

		 if (email.indexOf(" ")!=-1){
		    alert("Invalid E-mail ID")
		    return false
		 }

 		 return true
	}
function sexcheck()
{
var flag=0

var value=document.feedback.sex
//alert(value.length)
	for(i=0;i<value.length;i++)
	{
		if(value[i].checked ==true)
			flag=1;
	}
	if(flag==1)
		return true
	else
		return false
}
function validateFeedbackForm(){
	var name=document.feedback.name
	var sex=document.feedback.sex
	var emailID=document.feedback.email
	var feedback=document.feedback.feedbk

	if ((name.value==null)||(name.value==""))
	{
		alert("Please Enter Your Name")
		name.focus()
		return false
	}

	if ((emailID.value==null)||(emailID.value=="")){
		alert("Please Enter your Email ID")
		emailID.focus()
		return false
	}
	if (emailcheck(emailID.value)==false){
		emailID.value=""
		emailID.focus()
		return false
	}

	if(sexcheck()==false)
	{
		alert("Please Select your Gender")
		return false
	}
	if((feedback.value.length<10)|| (feedback.value==""))
	{
		alert("Your Feedback should contain atleast 10 character")
		return false
	}
	return true
 }
</script>
<?php
}
?>

The HTML:

Only the line below has been modified to use the JavaScript:

<form action="<?php  echo $PHP_SELF;?>" method="POST" 
onSubmit="return validateFeedbackForm();"   name="feedback" target="_self">

Rest, everything is same.

Click Source to view the source code

Assignment

1. Create an HTML form form.php, which contains 4 fields:
Name (text box),
Mobile Number(text box)
Gender (radio button)
Address (text Area)

On submitting the form, data goes to form.php which process the data and display it in HTML table, like one given below:

NAME	Mobile Number	Gender	Address
[form data]	[form data]	[form data]	[form data]

2. in the above HTML form (form.php) use JavaScript validation to check no form field is empty and all fields contains valid values