How to prevent empty inputs in my form (html & php) - php

Question

I am a total newbie in terms of php and that's why I always used read made codes for my contact forms. The thing is I don't know how to prevent empty inputs from being sent to my email. I have a one-input form and I would like to validate it. I really searched about a solution, but unfortunately it is not working. I hope someone can help me. I'll put here my code:
<?php
if (isset($_POST["submit"])) {
$email = $_POST['email'];
$from = 'Felipe Felix';
$to = 'email#email.com';
$subject = 'My email listing';
$body = "E-mail: $email";
if (mail ($to, $subject, $body, $from)) {
header("Location: index.html/success.html");
} else {
header("Location: index/error.html");
}
}
?>
And my HTML:
<form id="emailListing" class="form-horizontal" action="index.php" method="POST" enctype="multipart/form-data" name="sentMessage" data-fv-framework="bootstrap" data-fv-icon-valid="glyphicon glyphicon-ok" data-fv-icon-invalid="glyphicon glyphicon-remove" data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<div class="col-xs-8 col-lg-9">
<input id="email" class="form-control" name="email" type="email" placeholder="メールアドレス" data-fv-emailaddress-message="This is not a valid email" />
</div>
<input id="submit" name="submit" type="submit" value="Submit" class="btn btn-default col-xs-4 col-lg-3">
</div>
</form>
I am also using this (something I saw in another question, but it's not working I guess):
<script>
$(document).ready(function() {
$('#emailListing').formValidation();
});
</script>

Answer 1

For the html page you need to have required='required' or only required attribute in in your input-(html5 feature) which must not empty while submitting form and use it like
<input id="email" class="form-control" name="email" type="email" placeholder="メールアドレス" data-fv-emailaddress-message="This is not a valid email" required />
If you want to jquery validator in front end you can have many plugins but you need to include those code in your html page using <script> tag,in the backend for validation you just need to
<?php
if (isset($_POST["submit"])) {
$email = $_POST['email'];
if(empty($email))
{
header("Location: index/error.html");
}
$from = 'Felipe Felix';
$to = 'email#email.com';
$subject = 'My email listing';
$body = "E-mail: $email";
if (mail ($to, $subject, $body, $from)) {
header("Location: index.html/success.html");
} else {
header("Location: index/error.html");
}
}
?>

Answer 2

Try this..
<?php
if (isset($_POST["submit"])) {
$email = $_POST['email'];
$from = 'Felipe Felix';
$to = 'email#email.com';
$subject = 'Contact';
$body = "E-mail: $email";
if ($_POST['email']){
if (mail ($to, $subject, $body, $from)) {
header("Location: index.html");
}
else {
header("Location: index.html");
}
}
else{
header("Location: index/error.html");
}
}
?>

Answer 3

You can double check the empty field both client side and server side:
client side using jquery before submission:
$(document).ready(function() {
$("#emailListing").on('submit', function(e) {
e.preventDefault(); //to prevent submit before check
if ($("#email").val()!=''){
$("#emailListing").submit();
}
else
{
alert('Please fill email field');
}
});
});
server side by php after from submission:
if (!empty($_POST[email])){
// Do something
}

Answer 4

The thing is, after trying some of the suggestions the other users gave to me, I end up with a form that sends the email address if you input it but sends it anyway even if you let it empty (the error page comes, bu sends the email anyway). So, I tried another way and it worked! My form now prevents the user from sending empty inputs and give them a feedback if the user sends a valid email address. I don't know if it's 100% correct in the syntax, but I'm not getting any errors. Thank you all for the support! I'll put here my code:
PHP
<?php
if (isset($_POST["submit"])) {
$email = $_POST['email'];
$from = 'Me';
$to = 'email#email.com';
$subject = 'My Subject';
$body = "E-mail Address: $email";
if ($_POST['email']){
if (mail ($to, $subject, $body, $from)) {
header("Location: http://website.com/success.html");
}
else{
header("Location: http://website.com/error.html");
}
}
else{
header("Location: http://website.com/error.html");
}
}
?>
HTML (I'm using bootstrap, that's why all those classes)
<form id="emailListing" class="form-horizontal" action="index.php" method="POST" enctype="multipart/form-data" name="sentMessage" onsubmit="return validateForm()">
<div class="form-group">
<div class="col-xs-8 col-lg-9">
<input id="email" class="form-control" name="email" type="email" placeholder="E-mail Address" />
</div>
<input id="submit" name="submit" type="submit" value="Subscribe" class="btn btn-default col-xs-4 col-lg-3">
</div>
</form>
JS
<script>
function validateForm() {
var x = document.forms["sentMessage"]["email"].value;
if (x == null || x == "") {
alert("メールアドレスを入力してください");
return false;
}
}
</script>