Felipe Felix de Luca
Felipe Felix de Luca

Reputation: 193

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

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 protected]';
  $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>

Upvotes: 3

Views: 11504

Answers (4)

Felipe Felix de Luca
Felipe Felix de Luca

Reputation: 193

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 protected]';
  $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>

Upvotes: 0

Abhishek Gurjar
Abhishek Gurjar

Reputation: 7476

Try this..

<?php
      if (isset($_POST["submit"])) {
        $email = $_POST['email'];
        $from = 'Felipe Felix'; 
        $to = '[email protected]';
        $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");
 }
}
?>

Upvotes: 1

Veshraj Joshi
Veshraj Joshi

Reputation: 3579

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 protected]';
    $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");
  }
}
?>

Upvotes: 3

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

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 
}

Upvotes: 0

Related Questions