Form validatation and result on same html page - php

Question

i have form which i use on my page for client to be able to send me some messages. Everythings is ok and working. The one thing which is missing is that every form errors and result like (email typ error, first name missing) are showing up on new page. What i would like to have is on same page to have notifications and also result e.g "Your message has been send". I saw in some pages forms input can be highlitet on red if something is putted wrong etc. I read that this can be done either by ajax or jquery but to be honest i am not so familaiar with it. In my solution i am using bootstrap and php. Can you help me to achieve that? Below my current code.
html (using bootstrap):
<form action="send_form_email.php" method="post" class="form-horizontal">
<div class="form-group">
<label for="first_name" class="col-lg-2 control-label">First name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="Enter you first name">
</div>
</div><!-- End form group -->
<div class="form-group">
<label for="last_name" class="col-lg-2 control-label">Last name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Enter you last name">
</div>
</div><!-- End form group -->
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="email" name="email" placeholder="Enter you Email Address">
</div>
</div><!-- End form group -->
<div class="form-group">
<label for="telephone" class="col-lg-2 control-label">Telephone</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="telephone" name="telephone" placeholder="Enter you phone number">
</div>
</div>
<div class="form-group">
<label for="comments" class="col-lg-2 control-label">Any Message</label>
<div class="col-lg-10">
<textarea name="comments" id="comments" name="comments" class="form-control"
cols="20" rows="10" placeholder="Enter your Message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
here's php that handle email sending and form validation:
<?php
if(isset($_POST['email']))
{
// CHANGE THE TWO LINES BELOW
$email_to = "myemail#gmail.com";
$email_subject = "Nowy formularz od osoby";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errorsbr /><br />";
echo '<input type="button" value="BACK" onclick="history.back();">';
die();
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['telephone']) ||
!isset($_POST['comments'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
$telephone = $_POST['telephone']; // not required
$comments = $_POST['comments']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The First Name you entered does not appear to be valid.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'The Last Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Zawartosc wypelnionego formularza\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "First Name: ".clean_string($first_name)."\n";
$email_message .= "Last Name: ".clean_string($last_name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Telephone: ".clean_string($telephone)."\n";
$email_message .= "Comments: ".clean_string($comments)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
if(mail($email_to, $email_subject, $email_message)) {
echo "Dziekuje za kontakt postaram sie odezwac jak najszybciej | Thank you for contacting me. I will be in touch with you very soon.";
echo '<input type="button" value="BACK" onclick="history.back();">';
}else{
echo "Nie wyslano z z powodu nieznanego bledu prosze sprobuj ponownie lub zadzwon do mnie bezposrednio | Form was not send due to unknown reason please go back and try again if it would not help please try to rich me directly on my phone.<br/><br/><br/><br/>";
echo '<input type="button" value="BACK" onclick="history.back();">';
}
}
// die();

Answer 1

Change From
<form action="send_form_email.php" method="post" class="form-horizontal">
To
<form action="" method="post" class="form-horizontal">
Then save your HTML file as PHP and add your PHP code in top of form page
Updated PHP code for custom style error messages.
<?php
if(isset($_POST['email']))
{
// CHANGE THE TWO LINES BELOW
$email_to = "myemail#gmail.com";
$email_subject = "Nowy formularz od osoby";
function died($error)
{
// your error code can go here
// Adding bootstrap style class
echo '<div class="alert alert-warning" role="alert">';
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
//Not needed any more
//echo "Please go back and fix these errorsbr /><br />";
//echo '<input type="button" value="BACK" onclick="history.back();">';
echo '</div>';
die();
}
// New function style the error messages
function styleErrorMsg($string)
{
$string = '<div class="alert alert-warning" role="alert">'.$string.'</div>';
return $string;
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['telephone']) ||
!isset($_POST['comments']))
{
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
$telephone = $_POST['telephone']; // not required
$comments = $_POST['comments']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from))
{
$error_message .= styleErrorMsg('The Email Address you entered does not appear to be valid.<br />');
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name))
{
$error_message .= styleErrorMsg('The First Name you entered does not appear to be valid.<br />');
}
if(!preg_match($string_exp,$last_name))
{
$error_message .= styleErrorMsg('The Last Name you entered does not appear to be valid.<br />');
}
if(strlen($comments) < 2)
{
$error_message .= styleErrorMsg('The Comments you entered do not appear to be valid.<br />');
}
if(strlen($error_message) > 0)
{
died($error_message);
}
$email_message = "Zawartosc wypelnionego formularza\n\n";
function clean_string($string)
{
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "First Name: ".clean_string($first_name)."\n";
$email_message .= "Last Name: ".clean_string($last_name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Telephone: ".clean_string($telephone)."\n";
$email_message .= "Comments: ".clean_string($comments)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
if(mail($email_to, $email_subject, $email_message))
{
echo "Dziekuje za kontakt postaram sie odezwac jak najszybciej | Thank you for contacting me. I will be in touch with you very soon.";
echo '<input type="button" value="BACK" onclick="history.back();">';
}
else
{
echo "Nie wyslano z z powodu nieznanego bledu prosze sprobuj ponownie lub zadzwon do mnie bezposrednio | Form was not send due to unknown reason please go back and try again if it would not help please try to rich me directly on my phone.<br/><br/><br/><br/>";
echo '<input type="button" value="BACK" onclick="history.back();">';
}
}
// die();
?>