PeMaCN PeMaCN - 5 months ago 10
Javascript Question

Showing messages / errors - form validation

Since I'm new to web development and I want to advance in the right direction, I have a question concerning form validation. So, I have a small form which is supposed to add some information to database. Obviously, for this I need to use PHP. After form is submitted, I need to stay on the same page but I need to send user a message/error beneath the form (if the user has left input field empty or the database transaction has been completed successfully or it has not been completed at all).

This is my form:

<form method="post" action="index.php" name="addOperationForm">
<input type="text" class="input" placeholder="Name of operation" name="nameOfSearch"/>
<input type="text" class="input" placeholder="Security code" name="securityCode"/>
<input type="submit" class="btns" value="Add to dB" name="submitAddSearch"/>
</form>


So far I'm using separate PHP file - index.php for establishing connection with database and adding data to database.

To manage sending messages to user, should I use both PHP and HTML code in one (and then somehow echo messages beneath the form) or should I use jQuery (but how can I then establish database connection)? Eventually, what is the correct way of doing this? Please can you post an example?

Answer

What you can do is make a php script that will process the validation and return the response in json format so that jQuery can process the request using ajax.

for example in response.php

<?php
  //Get submitted data from the form
  $name = $_POST["name"];

  //sample validation character is less than 2 char
  if(str_len($name) < 2){
    $response = array(
                "error" => true,
                "message" => "Name should be 2 characters or more"
           );
  }else{
      $response = array(
           "error" => false,
           "message" => "Name is valid"
      );
  }

//Return the response for ajax request
     echo json_encode($response);

Now on your client side (form view) make ajax request using jQuery

$(document).ready(function(){
     $.ajax({
         url : "response.php", //the php script that will handle the validation
         method : "post"
     }).done(function(response){
        //handle the response
         if(response.error===false){
             //output the response message below the form
             //success has div with class success
             $("<div class='success'>" + response.message + "</div>").appendTo("form[name='addOperationForm']");

             //redirect to a page
             //  window.location.href = "nextpage.php";
         }else{
            //error has class='error'
             $("<div class='error'>" + response.message + "</div>").appendTo("form[name='addOperationForm']");
         }
     });
});

To add styling on your success and error class add the following on your css file

.success { background-color : #0f0; color : #fff; } /* background is green for success */
.error {background-color : #f00; color : #fff;} /* background is red for error */

The code isn't tested but should work on your use case.