Server side form validtion and returning message

Question

I am very new to Web Applications and no idea how to implement feedback from server is shown on the client (Web Page).

I am trying to implement server-side validation, that is information is being sent to the server and validated using PHP.

If the validation fails, the response is then sent back to the client, page that contains the web form is refreshed and a feedback is shown. (I have implemented client side validation, now want to implement at server side).

My difficulties are

(1)How to send information back from server to client?

(2)Form is refreshed and feedback is shown.

There are information out there as in this link, but no proper solution is provided.

Just a clue or direct solutions are more than happy, since I am a beginner at Web Applications.

Thanks

Answer 1

If you want to send data to an external script to be validated use Ajax to send the request. Process the data then echo your response/ status which will be returned in the Ajax request. From there you can use JavaScript to handle the response and update the page.

formpage.html

<form id="form">
    <input name="email" type="email"/>
    <input name="persons_name" type="text"/>
    <input name="password" type="password"/>
    <input type="submit" value="submit"/>
</form>

//JQuery
<script type="text/javascript">
jQuery("#form").on("submit", function(e){

    //This stops the form from submitting how it regularly would
    e.preventDefault();

    jQuery.ajax({
        url: "http://yoursite/path/to/phpfile.php",
        type: "POST",
        data: jQuery('#form').serialize(), /*grab all elements in your form and serialize them */
        onSuccess:  function(data){

           // I put this here so you can see data sent back in you console
           console.log(data);

           if(data.error == false){
              //validation was successfull
           }else if(data.error == true){
              //validation failed handle errors
           }
        },
        onError: function(){
           // the AJAX request failed as in timed out / bad url etc.
        } 
    });
});
</script>

phpfile.php

<?php
$data = array();
$data['error'] = false;

//if persons name is not set or does not have a value    
if(!isset($_POST['persons_name']) || empty($_POST['persons_name'])){ 

    $data['error'] = true;
    $data['message'][] = 'You have to have a name!';
}

//if password is set
if(isset($_POST['password']) && !empty($_POST['password'])){

   //validate password logic goes here

   if(!valid){  /*if its not valid*/
       $data['error'] = true;
       $data['message'][] = 'You password sucks!';
   }
}else{ /* password was not set */
    $data['error'] = true;
    $data['message'][] = 'What the heck you didn\'t add a password';
}

//if email is set
if(isset($_POST['email']) && !empty($_POST['email'])){

      //validate email logic goes here

    if(!valid){
        $data['error'] = true;
        $data['message'][] = 'Thats NOT an email address',
    }
}else{
    $data['error'] = true;
    $data['message'][] = 'Email address is required'
}

//optional
if(!$data['error']){
     // If there are no errors you can do something with your values here such as save them to a database etc.
}


// then echo the $data array you have built as JSON to use in jquery. 
//This will be what is returned in your AJAX request
echo json_encode($data);
?>

There is more logical ways to build your validation and I used jQuery here because...I like jQuery but this shows you at least how to access the values. valid and !valid are obviously not real operators and would need to be replace with however you want to check validation on each parameter. Also there is a lot more that goes into validation such as sanitizing but this will get you started and playing around with the two files. $data is just an array that can contain whatever. The $data['error'] key and value is what is used by the onSuccess function in the ajax call to determine if the validation was successful or not and the $data['message'][] is building one big array of messages. It may be more useful to give each message a unique key so you can parse it better with javascript such as $data['message']['email'] = etc... On last thing that got me in my the good ole days of form validating via ajax is that OnSuccess does not mean that you validation is successful. It simply means that a message was successfully sent back. On Error means that you hit an http error such as a 404 or 500 error.