Form validation using php and preserving data in the form fields during validation

Posted in: PHP by musiitwa joseph 2015-04-26 at 06:56:12

image for Form validation using php and preserving data in the form fields during validation Form fields should always be validated, one the reason is to prevent sql injection and also allowing only data of the required format. If data is in a format that you don't want you should deal with it, this can be through filtering out the wanted or rejecting the data. It can be frustrating to the user getting a blank form yet there was one form field with incorrect data, so we have to preserve data. If all data is of the required format then insert it into the database.

The form element has;
action - sends form data to a specified location
method - how the data should be sent
<form action="" method=""/>

Action is the url that will be loaded when the submit button is clicked, it can be left blank or use <?php echo $_SERVER['PHP_SELF']; ?> if the data is to be processed on the same page where the form is. Data entered in the form is sent to the url via the method specified in the method attribute. It can be get (add form data at the end of the url) or post (form data is sent in the background), if left blank the default is get.

The data is accessed with super globals that is $_GET(for data sent via get method), $_POST(for dat sent via post method) and $_REQUEST(for both data sent via post and get). An associative array with keys as names on the form fields and values as the data entered by the user, these are assigned to variables which simplies the validation and inserting of data into the database.

For example <input name="title" value="" type="text" /> assuming that the user enters php as his/her input data, the method being post. The super global will be accessed as $_POST['title'] or $_REQUEST['title'] which will be containing a value php, this super global can be assigned to variable, lets call the variable $title_input. Validation like checking if field is empty, string length and others. Preserving the value in the form is just by echoing the variable name into value i.e. <input name="title" type="text" value="<?php echo $title_input; ?>" />.

Index.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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Form validation using php, preserving data during validation and then insert into the database</title>
<link type="text/css" href="form.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h2>Form validation using php and preserving data in the form fields during validation</h2>
<?php
error_reporting(null);//to prevent the showing of Undefined index

//function for the super global
function post($input){
return $_POST[$input];
}

if($_SERVER['REQUEST_METHOD']=="POST"){
//getting the post values and assigning them to variables
$fname = post('fname');
$lname = post('lname');
$uname = post('uname');
$password = post('password');
$confirm = post('cPassword');
$sex = post('sex');
$email = post('email');
$phone = post('phone');
$address = post('address');
$agree = post('agree');

//variable for storing errors
$msg = ""; //you may also use an array for storing.

//By reading the string nested in the if statement, you can know what the if statement is doing
if($fname == ""){
$msg .= "Enter first name
";
}
if($lname == ""){
$msg .= "Enter last name
";
}
if($uname == ""){
$msg .= "Enter username
";
}

if($password == "" && $confirm != ""){
$msg .= "Enter password before confirming it.
";
}
if($password != "" && $confirm == ""){
$msg .= "Confirm password.
";
}
if($password == "" && $confirm == ""){
$msg .= "Enter password and confirm it
";
}
if($password != "" && $confirm != "" &&($password != $confirm)){
$msg .= "Passwords donot match
";
}
if($password != "" && (strlen($password) < 6)){
$msg .= "Password must be greater than 6 characters
";
}

if($email == ""){
$msg .= "Enter email address
";
}elseif(preg_match( "/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/", $email ) != 1){
//validating the email using regular expressions
$msg .= "Email not valid
";
}
if($phone == ""){
$msg .= "Enter telephone number
";
}elseif(preg_match( "/^07[0-9]{8}$/", $phone ) != 1){
//validating the email using regular expressions
$msg .= "Phone number not valid, it be 07XXXXXXXX
";
}
if($address == ""){
$msg .= "Enter address
";
}
if($msg == ""){
$msg1 .= "Congs, Your data is ready to be inserted into the database.";
echo '<meta http-equiv="refresh" content="3"/>';//refreshs the page after 3 seconds
}

}
?>
<form class="form" action="" method="post">
<div class="form_heading">
Registration form
</div>
<div class="form_body">
<?php
if($msg != "")
echo '<div class="fail">'.$msg.'</div>';
if($msg1 != "")
echo '<div class="success">'.$msg1.'</div>';
?>
<div class="left half">
First name:<br />
<input type="text" value="<?php echo $fname; ?>" name="fname"/>
</div>
<div class="left half">
Last name:<br />
<input type="text" value="<?php echo $lname; ?>" name="lname" />
</div>
<div class="clear"></div>
<div>
User name:<br />
<input type="text" value="<?php echo $uname; ?>" name="uname" />
</div>
<div class="left half">
Password:<br />
<input type="password" value="" name="password" />
</div>
<div class="left half">
Confirm Password:<br />
<input type="password" value="" name="cPassword" />
</div>
<div class="clear"></div>
<div>
<fieldset>
<legend>Contacts</legend>
<div>
<input type="text" value="<?php echo $email; ?>" name="email" placeholder="Enter email"/><br />
<input type="text" value="<?php echo $phone; ?>" name="phone" placeholder="Enter mobile No"/><br />
</div>
</fieldset>
</div>
<div>
Address:<br />
<textarea name="address"><?php echo $address; ?></textarea>
</div>
<div class="buttons">
<button type="submit">Submit</button>&nbsp;&nbsp;
<button type="reset">Cancel</button>
</div>
</div>
<div class="form_end">
&nbsp;
</div>
</form>
<footer>
<br /><br />
<div style="text-align:center">
Tutorial by <b>Code eagles</b>. You can get more at <a href="http://www.codeeagles.com" target="_blank">www.codeeagles.com</a>
</div>
</footer>
</div>
</body>
</html>


form.css



*{
padding:0;
margin:0;
}
body{
font-family: sans-serif;
}
.container{
width:95%;
max-width:600px;
margin:15px auto;
}
.half{
width:49%;
padding-right:1%;
}
.form{
width:100%;
margin:auto;
background-color:#DDDDDD;
border-radius:10px;
-o-border-radius:10px;
z-index:10px;
box-shadow:0px 0px 10px rgba(0, 0, 0, 0.8) inset;
}
.form_heading{
font-size:20px;
}
.form_heading,.form_button{
text-align:center;
color:rgba(250,250,250,0.8);
min-height:30px;
color:#FFFFFF;
background-color:#999999;
z-index:-10px;
}
.form_button, .end{
border-radius:0 0 10px 10px;
}
.form_heading, #side_menu .heading{
border-radius:10px 10px 0 0;
text-align:center;
padding:5px;
}
.form_body{
overflow:hidden;
color:#333333;
padding:10px;
}
.form_body input, .form_body textarea, .form_body select, .form_body button{
width:96%;
height:30px;
border-radius:5px;
border:none;
margin:2px;
box-shadow:0px 0px 2px rgba(0,0,0, 0.2) inset, 0px 0px 12px rgba(0,0,0, .3);
padding:2px 2%;
}
.form_body input[type="radio"], .form_body input[type="checkbox"]{
display:inline;
width:10px;
height:10px;
}
.form_body a{
color:#0033FF;
}
.form_body a:hover{
color:#FF0000;
}
.form_body div input[type="radio"]{
margin:15px 0;
}
.form_body button{
max-width:45%;
cursor:pointer;
opacity:0.8;
box-shadow:0px 0px 2px rgba(0,0,0, 0.5);

}
.form_body button img{
height:12px;
}
.form_body button[type="submit"]{
color:#00FF66;
background-color:#006600;
}
.form_body button[type="reset"]{
color:#FF0000;
background-color:#990000;
}
.form_body div{
margin-top:10px;
}
.form_body button:hover{
opacity:1;
transition: all 0.3s linear 0s;
}
.form_body .buttons{
text-align:center;
margin-top:10px;
}
.form_body textarea{
min-height:150px;
}
.form_body input:focus, .form_body textarea:focus{
background-color:#DFF0DD;
}
.form_body .date{
max-width:50px;
text-align:center;
margin:0px 5px;
}
.form_body .date_small{
max-width:30px;
text-align:center;
}
.form_body .sepa{
margin:0px 5px 0px 0px;
}
.form_body fieldset{
margin:5px;
padding:5px;
border-radius:5px;
border:solid 1px rgba(0,0,0,.2);
}
.form_body .small{
font-size:12px;
color:#999999;
text-align:center;
}
.fail{
background-color:#F99E8E;
padding:15px;
margin:10px;
font-size:12px;
}
.success{
background-color:#B7F4A8;
padding:15px;
margin:10px;
}
.left{
float:left;
}
.right{
float:right;
}
.clear{
clear:both;
}
Tags:
css
html


Search

Comments(1)


great work

from: mukasa at: 2015-04-28 , 03:02:45 PM


Leave a comment

Fields with * are required
Your email address will not be displayed
4 + 2 =