Modal Contact form required fields don't work

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");
      }
    });
  });
});

Solution

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