Validate a HTML Contact Form - php

Question

I have a HTML Contact Form which I need validating in a certain way.
Instead of alerting the user in JavaScript if any fields have not been filled I prefer to show the words 'Field Required' below the fields which were left empty.
Here is my contact form contact.html:
<form id = "myForm" action="contact.php" method="post">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
<label for="name">Email:</label>
<input type="text" name="email" id="email" value="" tabindex="1" />
<input type="submit" value="Submit" class="button" />
</form>
Here is my PHP form contact.php (Everything omitted apart from validation):
//Validation... I am building up an error message string to alert the user at the end (omitted)
$errormessage = '';
if(!isset($_POST['name']) || strlen($_POST['name']) < 1){
$errormessage .= 'You have not entered your Name\n';
}
if(!isset($_POST['email']) || strlen($_POST['email']) < 1){
$errormessage .= 'You have not entered your Email Address\n';
}
if($errormessage != ''){ ?>
<script language="javascript" type="text/javascript">
alert('<?php echo "$errormessage" ?>');
window.location = 'contact.html';
</script>
<?php }
else {
$mail_to = 'info#email.co.uk';
$subject = 'Message from a site visitor '.$field_name;
$body_message = 'From: '.$field_name."\n\n";
$body_message .= 'E-mail: '.$field_email."\n\n";
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
}
As you can see my current validation builds up a string in PHP which is going to be alerted to the user at the end (omitted) however I want to replace this method by showing the string 'Field Required' below the HTML fields which have been left empty.

Answer 1

Another option if you are okay using some html5 features is to set the required attribute on the inputs.
required
This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate.
Taken from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
So your html would become:
<form id = "myForm" action="contact.php" method="post">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" tabindex="1" required />
<label for="name">Email:</label>
<input type="text" name="email" id="email" value="" tabindex="1" required />
<input type="submit" value="Submit" class="button" />
</form>

Answer 2

I wanted to answer your question without deviating from your approach.
If contact.html can be parsed by php, or it were simply changed to contactform.php, you could send a query string to it indicating which fields had errors and display a message below them.
contactform.php
<form id = "myForm" action="contact.php" method="post">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
<?php if (isset($_GET['name']) && $_GET['name'] == 1) {
echo '<br/>This field is required.';
} ?>
<label for="name">Email:</label>
<input type="text" name="email" id="email" value="" tabindex="1" />
<?php if (isset($_GET['email']) && $_GET['email'] == 1) {
echo '<br/>This field is required.';
} ?>
contact.php
$error = FALSE;
$errors = array();
if(!isset($_POST['name']) || strlen($_POST['name']) < 1){
$error = TRUE;
$errors[] = 'name=1';
}
if(!isset($_POST['email']) || strlen($_POST['email']) < 1){
$error = TRUE;
$errors[] = 'email=1';
}
$geterrors = (count($errors) > 1 ? implode('&',$errors) : $errors[0]);
if($error){ ?>
<script language="javascript" type="text/javascript">
window.location = 'contactform.php?<?php echo $geterrors; ?>';
</script>
...