can someone help me with this contact validation form? - php

Question

Ok I need to make this contact form highlight red and say not valid inside the boxes! What ever I do I can't get it to work! I can't change the HTML tags that are already there you can add to the HTML but not delete any of it but I want it to display on the same page with JavaScript and have it look very nice can someone edit what I have and help me make this work please!
Oh and I keep getting 2 emails every time I test it also!
Here is there HTML:
<!-- Contact -->
<div class="wrapper wrapper-style4">
<article id="contact">
<header>
<h2>Want to hire me? Get in touch!</h2>
<span>I do quality work and would love to work for you!.</span>
</header>
<div>
<div class="row">
<div class="12u">
<div id="errors"></div>
<form method='post' action='mailform.php' id='contact-form'>
<div>
<div class="row half">
<div class="6u">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u">
<input type="text" name="email" id="email" placeholder="Email" />
</div>
</div>
<div class="row half">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
Send Message
Clear Form
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Contact -->
<div class="wrapper wrapper-style4">
<article id="contact">
<header>
<h2>Want to hire me? Get in touch!</h2>
<span>I do quality work and would love to work for you!.</span>
</header>
<div>
<div class="row">
<div class="12u">
<div id="errors"></div>
<form method='post' action='mailform.php' id='contact-form'>
<div>
<div class="row half">
<div class="6u">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u">
<input type="text" name="email" id="email" placeholder="Email" />
</div>
</div>
<div class="row half">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
Send Message
Clear Form
</div>
</div>
</div>
</form>
</div>
</div>
I need the JavaScript here:
<script>
</script>
And the PHP form is here:
<?php
$to = "bcw1995#gmail.com";
$subject = $_REQUEST['subject'];
$message = $_REQUEST['message'];
$from = $_REQUEST['email'];
$headers = "From:" . $from;
mail($to,$subject,$message,$headers);
if (isset($_REQUEST['email']))
//if "email" is filled out, send email
{
//send email
$email = $_REQUEST['email'] ;
$subject = $_REQUEST['subject'] ;
$message = $_REQUEST['message'] ;
mail($_REQUEST['email'], $subject,
$message, "From:" . $email);
}
header("Location: http://www.thorbis.com/#contact");
?>
Can someone please fix this you will be a life saver!

Answer 1

You get two E-Mails:
Your mail is send twice, because you are calling two times the mail() function. Delete this line mail($to,$subject,$message,$headers);
// EDIT
change the second E-Mail function to this: mail($to, $subject, $message, "From:" . $email);
Else the sender will get the email that he has send.
Validation:
There are a lot of ways and librarys for a Javascript Form-Validation. I recommand jQuery + jQuery.Validation Plugin (http://jqueryvalidation.org/).
But i would also add a validation in the PHP file, because if somebody has disabled javascript, he can send empty emails.
I hope that i could help you.