Creating server side validation contact form

javascript

#1

So I am wanting to write a PHP contact form that will perform the following

Server side validation by the PHP script for greater security
Validation of Google ReCaptcha
Relying on Javascript for printing error messages and making CSS changes

The original contact form I have just prints the error messages but now I am looking to utilize JSON to pass the errors onto Javascript for printing.

What would be the best method to achieve this?

My Original PHP:

<?php
ob_start();
/* Put Here email where you will receive Contact message*/
$yourEmail = "email@email.com"; // <== Your Email
$secret = 'LALALALAALALALALALALA'; // <==Your recaptcha Privte Key
/*---------------------------------------*/

// ---------------------Start the recaptcha ------------------------------------//
if(isset($_POST['g-recaptcha-response']) && ($_POST['g-recaptcha-response'])){
        session_start();
    $ip = $_SERVER['REMOTE_ADDR'];
    $captcha = $_POST['g-recaptcha-response'];
    $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$captcha&remoteip=$ip");
    $result = json_decode($response,TRUE);
        if($result['success'] == 1){
            $_SESSION['result'] = $result['success'];
            }

// --------------------End Of the Captcha Check------------------------- //

/////////////Showing all errors in array : DO NOT DELETE THIS
$formerrors = array();
///////////////////This Array will Hold all errors

// Start Captcha
if(!isset($_SESSION['result']) || $_SESSION['result'] == 0){
    $formerrors[] =  'Captcha Error';
}
//end Captcha


// remove this to make name not required
if(empty($_POST['name'])){
$formerrors[] = "Name Cannot be empty";
}
// End name


// Remove this to make email not required
if(empty($_POST['email'])){
  $formerrors[] = "Email Cannot be empty";
}
// End of email

// Remove this to make email not required
if(filter_var($_POST['email'],FILTER_VALIDATE_EMAIL) == FALSE){
  $formerrors[] = "Make Sure Email is valid";
}
// End of email

// Remove this to make Phone not required
if(empty($_POST['phone'])){
  $formerrors[] = "Phone Number Cannot be empty";
}
// End of Phone



// Remove this to make Phone not required
if(!is_numeric($_POST['phone'])){
  $formerrors[] = "Phone Is not valid";
}
// End of Phone



// Remove this to make Message not required
if(empty($_POST['message'])){
   $formerrors[] = "Message Cannot be empty";
}
// End Of Message


/* Your New inputs */

    // CODE HERE

/* end of new Inputs*/




// End Showing Errors In Array


if(count($formerrors) == 0){
 // Saving data in variable :
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];
    /* Your New inputs */

        // $newinput = $_POST['new-input'] // new-input same as ID and ajax

    /* end of new Inputs*/

    //If No Error in the Array Start Sending the email
    $to = $yourEmail;	// Email to receive contacts
    $from = $email;
    $subject = 'Contact Form Email : ' . $title;
    $message = '<style>
                body{background-color:#fefefe}
                .email-style {padding: 30px;background: #fafafa;font-size: 18px;border: 1px solid #ddd;width: 60%;margin: auto;}
                p {padding: 15px 0px;}
                </style>

                <div class="email-style"><p> '.$title . '</p>

                <p>Contact Full Name : '.$name . ' </p>

                <p>Contact Email : '.$email . ' </p>

                <p>Contact Phone Number : '.$phone . '</p>

                <p>Message : '.$message . ' </p>

                <p>Cheers,</p>
                <p>'.$name.' Via Contact Form</p></div>';

    $headers = "From: $from\n";
    $headers .= "MIME-Version: 1.0\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1\n";
       if( mail($to, $message, $headers) ){
            echo "sent";
            session_unset();
            session_destroy();
          } else {
                   echo "The server failed to send the message. Please try again later.";
                }

                    // If there are Errors in form :
   }else{

    //if there are Errors in the Array , Show errors in form
    echo '<div id="contact-errors">';
    foreach($formerrors as $error){
     echo '<div class="errors-section mdl-cell mdl-cell--12-col">
           <span class="mdl-chip mdl-chip--contact">
           <span class="mdl-chip__contact mdl-color-text--white"><i class="material-icons error-form">error_outline</i></span>
           <span class="mdl-chip__text">' . $error . '</span>
           </span></div>';}

    echo '</div>';}// End of errors here
}else{
    echo 'Fill in Captcha ';

}

ob_flush();
?>

Javascript:

$(document).ready(function() {


    $('#submit').click(function(e){
      e.preventDefault();


      var name = $("#name").val();
      var email = $("#email").val();
      var phone = $("#phone").val();
      var message = $("#message").val();


      $.ajax({
          type: "POST",
          url: "formmaster.php",
          dataType: "json",
          data: {name:name, email:email, phone:phone, message:message},
          success : function(data){
              if (data.code == "200"){
                  alert("Success: " +data.msg);
              } else {
                  $(".display-error").html("<ul>"+data.msg+"</ul>");
                  $(".display-error").css("display","block");
              }
          }
      });


    });
});

But how do I do this properly with PHP performing the validation and then passing the messages to print to Javascript?


#2

Isn't that what the code you have is doing? Your 'success' function checks the return code and deals with the data that comes back from the PHP code.

I haven't got a lot of knowledge of this, and it might be better asked in the JavaScript forum, but maybe you need to add an 'error' function to handle situations where there is a problem. I wonder whether it only calls 'success' if the return code is 200, so your if/then is spurious.

Does the code you have work and you are just wondering if it could be improved, or do you have problems with it?


#3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.