Validating a form submission

When filling a form it is natural for the users to make mistakes. To get appropriate data we should always validate the forms. This is an example for a validation done to a form.

The form action calls for the route which will direct it to the function will check if there are any other event existing in the database. If there are events on the same date, an error message will be displayed.

The route

Route::post('submitproject', array('as'=> 'submitproject', 'uses'=>'ProjectsController@postProject'));

This will direct to the function 'postProject' in the controller 'ProjectsController'.

The Function

public function postProject()
  {
$event_date = Input::get('p_dateofevent');
$date = DB::select('SELECT ProjectID FROM projects WHERE DateOfEvent=?',array($event_date));

if($date == null)
{


DB::table('projects')->insert(array(
"ProjectTitle" => Input::get('p_title'),
"DateCreated" => Input::get('p_datecreated'),
"DateOfEvent" => Input::get('p_dateofevent'),
"ProjectManager" => Input::get('p_manager'),
"NoOfStaffs" => Input::get('p_noofstaffs'),
"ProjectDescription" => Input::get('p_description'),
));

$error ='New project is successfully added!';
return Redirect::to('DHProjects')->with('error',$error);

}
else
{
$error='The event date is not allowed. Please give a different event date.';

return Redirect::to('DHProjects')->with('error',$error);

}



}

In this function, it will take the event date from the form and check if any other events are there in the system with the same event date. If there are events an error will be displayed ( the else section). Otherwise the data will be added to the system.

The error message shown when an event is existing for a given Event Date.

Apart from that, the user will be alerted if he gives an event date which is invalid ( giving a past date as the event date).  The function has been called on an onchange, where the validation will be done as soon as the user gives a date.
The HTML code

<label>Event Date</label><input required type="date" id="p_dateofevent" name="p_dateofevent" class="form-control input-lg"  onchange="validateSubmission();"> <br />

The Javascript Function

 function validateSubmission()
            {
         
                var eventdate = document.getElementById('p_dateofevent').value;
             
                //getting the current date.
                var currentDate = new Date();

                var day = currentDate.getDate();
                var month=('0'+(currentDate.getMonth()+1)).slice(-2);
                var year = currentDate.getFullYear();
                var currDate =   year + "-" + month + "-" + day ;
             
             
                 if(eventdate <= currDate)
                    {
     
                      alert("Invalid Event Date");
                      return false;
                    }


            }

The output will be as below.

As a user it will be annoying to them if they have to give a date when it can be straight away taken from the system. In the Date Created field, the system will get the system date and display and will not allow the user to change it. This is done in order to get appropriate data.

         
                         function addDate()
                              {
                                var datee = new Date();
                                var month = datee.getMonth()+1; //January is taken as 0
                                var day = datee.getDate();
                                var year = datee.getFullYear();

                                if(document.getElementById("p_datecreated").value==''){
                                  document.getElementById("p_datecreated").value=year+'-'+month+'-'+day;
                                }
                              }

                              <?php
                                echo "addDate();";
                              ?>

   
        The addDate function will get the system date by calling the Date() function. Since the return value is in the date time format, the month, date year will be extracted form the function. p_datecreated' is the   textfield name in the form where the date should be displayed.

 <label>Date Created</label><input required type="text" id="p_datecreated" name="p_datecreated" class="form-control input-lg"  readonly="true"> <br />

Note that this text has been set so readonly, which has disabled the user on editing the text field. Once you go to the form, the system date will be shown.