Error messages for contact form - php

Question

I am using the code below, but want error messages when the user skips a required field. Can anyone help, please? So if a user forgets to fill the required input filed "first name", that an error message appears above the field with the text "First name is a required field".
<form id="comment_form" action="form.php" method="post">
<div class="compulsoryfield">
<input class="inputfield-radio" type="radio" name="gender" value="Mr" required><label class="label-radio">Mr.</label>
<input class="inputfield-radio" type="radio" name="gender" value="Ms"><label class="label-radio">Ms.</label>
<span class="requiredmark-radio">*</span>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input class="inputfield3" type="firstname" placeholder="first name" required>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input class="inputfield1" type="lastname" placeholder="last name" required>
</div>
<input class="inputfield2" type="companyname" placeholder="company name (if applicable)">
<input class="inputfield2" type="customernumber" placeholder="customer number (on invoice if available)" >
<br><br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input class="inputfield3" type="email" placeholder="email address" required>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input class="inputfield1" type="emailagain" placeholder="re-enter email address (to confirm)" required>
</div>
<input class="inputfield2" type="telephonenumber" placeholder="telephone number (country code included)">
<br><br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input class="inputfield3" type="subject" placeholder="subject of message" required>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<textarea id="textareafieldid" class="textareafield" name="message" placeholder="add your message here" rows="8" cols="39" required></textarea></div><br><br>
<p id="recaptcha-header">before sending, please show us you're real:</p>
<div><span class="requiredmark">*</span><div id="g-recaptcha-outer" class="compulsoryfield2">
<div class="g-recaptcha" data-sitekey="mySitekey"></div></div><br><br>
<input id="button-type1" type="submit" name="submit" value="SEND">
</form>
and
<?php
$email;$comment;$captcha;
if(isset($_POST['gender'])){
$email=$_POST['gender'];
}if(isset($_POST['firstname'])){
$email=$_POST['firstname'];
}if(isset($_POST['lastname'])){
$email=$_POST['lastname'];
}if(isset($_POST['companyname'])){
$email=$_POST['companyname'];
}if(isset($_POST['customernumber'])){
$email=$_POST['customernumber'];
}if(isset($_POST['email'])){
$email=$_POST['email'];
}if(isset($_POST['emailagain'])){
$email=$_POST['emailagain'];
}if(isset($_POST['telephonenumber'])){
$email=$_POST['telephonenumber'];
}if(isset($_POST['subject'])){
$email=$_POST['subject'];
}if(isset($_POST['message'])){
$email=$_POST['message'];
}if(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
echo '<h2>Please check the captcha form.</h2>';
exit;
}
$secretKey = "mtSecretKey";
$ip = $_SERVER['REMOTE_ADDR'];
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
$responseKeys = json_decode($response,true);
if(intval($responseKeys["success"]) !== 1) {
echo '<h2>You are a spammer !</h2>';
} else {
echo '<h2>Thanks for your email.</h2>';
}
?>

Answer 1

I suggest you to try js plugins like :
http://parsleyjs.org/
or
http://www.formvalidator.net/
You gonna see, the first is for me the best , and the second is very simple.
With the second you just have to add an attribute rules to your field like :
data-validation="required".
With this example you can required a field.

Answer 2

send the destination of the form to the same page the form is on.
At the top of the page before any html code is sent to the client, do your form handling.
$problemstring = "";
$firstname = "";
if(isset($_POST['submit'])){
if(!isset($_POST['firstname'])){$problemstring = "Error in firstname"}
//repeat for all fields
}
if(strlen($problemString)==0) {
//Do database actions here
//The Line below redirects to another page if form good
if(strlen($problemString)==0) die(header('Location: index.php'));
}
This code you check your form for blank data then if there are no problems run the database operations. If there is a problem the rest of the page will load.
Put the code below where you want the error message to be displayed.
<?php
if(strlen($problemString)>0) {
echo '<table><tr>';
echo '<td colspan="3">';
echo '<font color="#FF0000"><strong>There was a problem with your form</strong><br>';
echo $problemString;
echo '</font></td>';
echo '</tr>';
echo '<tr><td colspan="3" height="16"></td></tr></table>';
}
?>
In your form do this:
<input class="inputfield3" type="firstname" placeholder="first name" value="<?php echo $firstname; ?>" required>
this will populate the field with what was entered into the form before the submit, if this was the empty field it would be blank. if the page is loaded for the first time the value would be blank (or whatever you set).
Ive used this in my website and it works well.