Modal Contact form required fields don't work

Question

I have a modal on my page, with a contact form in it. Anyway, the fields like mail should be required but it just sends it right away, even when the fields aren't filled in... How is that possible?

The Modal:

<div class="modal fade" id="form-content" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header" style="border-bottom: none;">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Contact</h4>
          </div>
        <div class="modal-body">
          <form class="contact" name="contact">
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input type="text" name="name" class="form-control" placeholder="Name" required="required">
            </div>
            <br/>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                <input type="email" name="email" class="form-control" placeholder="Mail">
            </div>
            <br/>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                <input type="url" name="website" class="form-control" placeholder="Website">
            </div>
            <br/>
            <textarea rows="6" name="message" class="form-control" placeholder="Message"></textarea>
          </form>
        </div>
        <div class="modal-footer" style="border-top: none;">
          <input class="btn btn-success" type="submit" value="Send!" id="submit">
        </div>
      </div>
    </div>
  </div>

PHP script:

<?php
$myemail = 'mail@mail.nl';
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
$website = strip_tags($_POST['website']);
echo "<br><span  style=\"display:table; margin:0 auto;\" class=\"alert alert-success\" id=\"alert-message\" data-alert=\"alert\">Your message has been received. Thank you!</span>";


$to = $myemail;
$email_subject = "Contact formulier van: $name";
$email_body = "Je hebt een nieuw bericht ontvangen via het contactformulier. ".
"Hier zijn de de details:\n Naam: $name \n ".
"Email: $email\n Website: $website \n Bericht: \n $message";
$headers = "From: $email\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}?>

EDIT: I also hava a main.js, to show the people the form has been sended:

    $(document).ready(function () {
  $("input#submit").click(function(){
    $.ajax({
      type: "POST",
      url: "process.php", // 
      data: $('form.contact').serialize(),
      success: function(msg){
        $("#thanks").html(msg)
        $("#form-content").modal('hide'); 
        $('#thanks').delay(3000).fadeOut()
      },
      error: function(){
        alert("failure");
      }
    });
  });
});

Answer 1

You missed the action and method in your form: action="yourpage.php" method="POST"

Where action refers to your php page and method to the way you send data, in this case POST as in your PHP code you have $_POST['name'] (etc).

Also the Submit should be inside the Form tag, not outside.

Something like this:

<div class="modal fade" id="form-content" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header" style="border-bottom: none;">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Contact</h4>
      </div>
    <div class="modal-body">
      <form class="contact" name="contact">
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-user"></i></span>
            <input type="text" name="name" class="form-control" placeholder="Name" required="required">
        </div>
        <br/>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="email" name="email" class="form-control" placeholder="Mail">
        </div>
        <br/>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-globe"></i></span>
            <input type="url" name="website" class="form-control" placeholder="Website">
        </div>
        <br/>
        <textarea rows="6" name="message" class="form-control" placeholder="Message"></textarea>
        <div class="modal-footer" style="border-top: none;">
          <input class="btn btn-success" type="submit" value="Send!" id="submit">
        </div>
      </form>
    </div>
  </div>
</div>

Ref: http://www.w3schools.com/tags/tag_form.asp

Answer 2

You have to mention form method and action in form open tag. After then check the output. for example, Form structure should be like,

<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>