HOW TO DO CLIENT AND SERVER SIDE VALIDATION ?
This blog explains how to do client side means validation with javascript and server side validation means validation with php.
STEPS TO DO VALIDATION FROM CLIENT (JS VALIDATION) AND SERVER SIDE (PHP VALIDATION):
Step 1: JavaScript / Client side Validation
In client Side validation, validation perform on client computer by using Javascript before form data send to server.
first we change following code in insert.php File(The File which is used to allow user to enter data through form)
FILE NAME: insert.php
<form action="insert_back.php" method="POST">
With following code in the same file
FILE NAME: insert.php
<form action="insert_back.php" method="POST" onsubmit="validation();">
After above changes, we create a js file and named is 'client_validation.js'.
FILE NAME: client_validation.js
function validation() {
if(document.getElementById('name').value!="") {
var alphaExp = /^[a-zA-Z]+$/;
if(!document.getElementById('name').value.match(alphaExp)) {
alert("please use alphabets only");
document.getElementById('name').focus();
return false;
}
}else {
alert(" Required User name");
document.getElementById('name').focus();
return false;
}
if(document.getElementById('email').value!="") {
var mail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(!document.getElementById('email').value.match(mail)) {
alert("Please enter valid email ");
document.getElementById('email').focus();
return false;
}
}else {
alert("Please enter Email");
document.getElementById('email').focus();
return false;
}
}
Explanation of above code:
- we have check for alphanumeric, in which we will be using “Regular Expression” and match function. We will check it Name field value. If not matched, it will display error message.
- We have check for email field which we will be using “Regular Expression”. if not matched or it field blank so display error message.
- we use a document.getelementbyid(‘ ‘).focus() to focus on the input box which ‘id’ returns false.
- alert() function use to display message.
The js file add or include in insert.php using this link in head part.
<script type="text/javascript" src="client_validation.js"></script>
call the function using form attribute onsubmit write below code.
<form action="insert_back.php" method="POST" onsubmit="return validation()">
Step 2: PHP/Server side Validation
In Server Side Validation, validation perform after the user send data to server via HTML form by click on submit button and data received on server side and check data on server. If there is any data is not follow rules then server send back error message to client computer.
Copy below code and paste to insert_back.php file.
FILE NAME: insert_back.php
<?php
session_start();
include("connect.php");
if(isset($_POST['submit'])){
$name=$_POST['name'];
$email=$_POST['email'];
$_SESSION['name']=$name;
$_SESSION['email']=$email;
if(empty($name)){
$error_name ="*Please Enter Your Name";
header("Location:insert.php?error_name=".$error_name);
}else if(!preg_match("/^([a-zA-Z' ]+)$/",$name)){
$error_name="*Please use alphabets only";
header("Location:insert.php?error_name=".$error_name);
}else if(empty($email)){
$error_name = "*Email Cannot be blank";
header("Location:insert.php?error_name=".$error_name);
}else if(!preg_match("/^[_\.0-9a-zA-Z-]+@([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z]{2,6}$/i", $email)){
$error_name='*Not valid email id ';
header("Location:insert.php?error_name=".$error_name);
}else{
if(empty($_POST['cid'])){
$query="insert into user_data(name,email) values('".$name."','".$email."')";
$msg="Insert successful";
session_destory();
}else{
$query="update user_data set name='".$name."',email='".$email."' where id='".$_POST['cid']."'";
$msg="Update successful";
session_destory();
}
$result=mysqli_query($connection,$query);
if($result){
header("Location:index.php?msg=".$msg);
}else{
$msg="Problem with Insert";
header("Location:index.php?msg=".$msg);
}
}
}
?>
Explanation of above code:
- In above code empty function check the input field is empty or not. If its empty then give message.
- In above code header function is used to error message display in insert.php with query string.
- In above code $_SESSION is used to store values of input fields and session_start() function is used to start session. session_destory function is used to destroy session, after insert and update data.
Now update 'insert.php' page code to display error message and data, if there is any error from server side validation. Copy and paste below code in 'insert.php' page.
FILE NAME: insert.php
<?php
session_start();
include("connect.php");
if(isset($_GET['cid']) && !empty($_GET['cid'])){
$cid=$_GET['cid'];
$edit_query="select * from user_data where id='".$cid."'";
$result=mysqli_query($connection,$edit_query);
$row=mysqli_fetch_array($result);
}
?>
<html>
<head>
<title>Crud Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="client_validation.js"></script>
</head>
<body>
<h1 align="center"> Insert Form</h1>
<div style="errormsg”>
<span style=" border:3px;color: rgb(216,0,0);border-radius: 15px; width: 20%"><?php if(isset($_GET['error_name']) && !empty($_GET['error_name'])){ echo $_GET['error_name']; } ?></span>
</div>
<div class="content">
<form action="insert_back.php" method="POST" onsubmit="return validation()">
<div class="row">
<label>Name</label>
<input type="text" name="name" id="name" value="<?php if(isset($row['name'])){echo $row['name'];} else if(isset($_SESSION["name"]) && isset($_GET['error_name']) &anp;& !empty($_GET['error_name'])){
echo $_SESSION["name"];
}?>">
</div>
<div class="row">
<label>Email</label>
<input type="text" name="email" id="email" value="<?php if(isset($row['email'])){echo $row['email'];} else if(isset($_SESSION["email"]) && isset($_GET['error_name']) && !empty($_GET['error_name'])){
echo $_SESSION["email"];
}?>">
</div>
<div class="row">
<div class="cols">
<input type="submit" name="submit" value="submit">
</div>
<div class="cols">
<input type="hidden" name="cid" value="<?php if(isset($_GET['cid'])){echo $_GET['cid'];} ?>">
</div>
</div>
</form>
</div>
</body>
</html>
Explanation of above code:
- In above code, “else if(isset($_SESSION["name"]) && isset($_GET['error_name']) && !empty($_GET['error_name'])) { echo $_SESSION["name"]; } “ check session value is set or not and if it is set then echo session value.
- Form doesn't display any form data when error_name is not set or empty in URL or we refresh the page.
Note: To check server side validation in 'CRUD' application, first block javascript in chrome settings.