How to do client form data validation in PHP/HTML

Question

I have three php files. One is the controller "index.php". One is for displaying output "people.php". The other is a form for user input "form.php"

form.php looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<form action = "" method = "post">

 First name: <input name ="first_name" type = "test" size = "55" maxlength = "55"><p>
 Second name: <input name ="second_name" type = "text" size = "55" maxlength = "55"><p>
 
 


Month: <select name="month">
  <option value="">select month</option>
  <option value="January">January</option>
  <option value="February">February</option>
    <option value="March">March</option><p>
  <option value="April">April</option><p>
  <option value="May">May</option><p>
  <option value="June">June</option><p>
  <option value="July">July</option><p>
  <option value="August">August</option><p>
  <option value="September">September</option><p>
  <option value="October">October</option><p>
  <option value="November">November</option><p>
  <option value="December">December</option><p>
 </select><p>

Year: <select name ="year">
  <option value = ""> -select year-</option>
  <option value = "2015"> 2015 </option>
  <option value = "2016"> 2016 </option>
  <option value = "2017"> 2017 </option>
 </select><p>

 Date of birth:<input name="date_of_birth" input type="text" id="datepicker"></p>
   
   
<input name = "add_person" type="submit" value = "submit">
</form>
</html>

Index.php looks like this:

<?php

    if (!isset($_POST['add_person'])){
    include 'form.php';
    }

    elseif (isset($_POST['add_person']) && empty($_POST['first_name']) && empty($_POST['second_name']) && empty($_POST['month']) && empty($_POST['year']) && empty($_POST['date_of_birth'])){

    include 'form.php';

    }

    elseif (isset($_POST['add_person'])){

    if (empty($_POST['first_name'])){
        exit("First name cannot be left empty");
        }

    if(empty($_POST['second_name'])){
        exit("Second name cannot be left empty");
        }

    if(empty($_POST['month'])){
        exit("month cannot be left empty");
        }

    if(empty($_POST['year'])){
        exit("year cannot be left empty");
        }

    if(empty($_POST['date_of_birth'])){
        exit("date of birth cannot be left empty");
        }

    $date1 = $_POST['date_of_birth'];
    $date2 = date("Y-m-d");

    if($date2 < $date1){
        exit("Invalid date: Date of birth cannot be in the future");
    }


    $authors = $_POST['first_name'];
    $title = $_POST['second_name'];
    $month = $_POST['month'];
    $year = $_POST['year'];


echo "$first_name <br> $second_name <br> $month <br> $year <br> $date1";
?>
}


else{
include "form.php";
}
?>

and people.php looks like this:

<html>
<head>
<title></title>

<script>

<!--jquery imebidi(necessary evil)....jquery copy-pasted from here https://jqueryui.com/datepicker/ -->
   
 $(function() {
      var date = $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
   });

  </script>
</head>

<body>
 <div id="header">
  <div class ="center">
  <p>Manuscript management information system</p>
 </div>
  </div>

<div id="content-wrapper">
 <div id="content-main">

  <p></p>

<?php
include 'index.php';

?>


 <p>
 </div>
 <div id="content-secondary">
  <p>mmmmmmmmmmmmm</p>
 </div>
</div>
<div id="sidebar">
 
    <li><a href="Recently recruited">Recently published</a></li>
 <li><a href="awaiting certificates">Submitted to PubCom</a></li>
 <li><a href="Not yet submitted"></a></li>
 
</div>
<div id="footer"><p>Welcome</p>

</div>
</body>
</html>

What I'm trying to achieve is to have the error message displayed on the form without having to be transferred to a new page. I mean, if a user fails to enter first name then he/she should get an error on the same form.

Incidentally, you've got a bunch of unclosed `
` tags in your code. — showdev, Apr 20 '15 at 16:17
Removed an unnecessary "Run code snippet" and improved title — Mackan, Apr 23 '15 at 06:03

score 0 · Accepted Answer · answered Apr 20 '15 at 08:53

0

You can either add a "required" attribute to every required field :

    First name: <input name ="first_name" type = "test" size = "55" maxlength = "55" required>

Or add a "onsubmit" attribute to your form and write a validation scipt in javascript :

<form action = "" method = "post" onsubmit="return validation();">

<script>
function validation(){
    if(<conditions>){
        return true;
    }else{
        return false;
    }
</script>

answered Apr 20 '15 at 08:53

Xavier Doustaly

83
10

Thanks @Xavier. Any idea how this can be done with Php – Maina Mailu Apr 20 '15 at 09:23
You can't, Php is a server-side langage and can't achieve any validation on client. It means you MUST send data to php server before it can says anything about it. Why won't you use javascript ? – Xavier Doustaly Apr 20 '15 at 09:32

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

you can use HTML 5 Form validation rules . Use the required attribute for getting non empty fields.

<input type="text" name="name" required>

you can also use various input types email, url, number, tel, date to validate specific types . refer this link for more details .

<input type="email" name="email" required placeholder="Enter a valid email address">

other options is to use javascript . check this stackoverflow thread on how to achieve this using jquery .

edited May 23 '17 at 11:43

Community

1
1

answered Apr 20 '15 at 08:57

Sojan Jose

3,168
6
33
52

@Maina for using php . you will have to post the data to the server. ( that won't satisfy your request of no page refresh ) Anything that happens in a web browser with out refresh is done via `javascript` . php is for server side . – Sojan Jose Apr 20 '15 at 09:25

How to do client form data validation in PHP/HTML

2 Answers2