模态联系表必填字段不起作用

Question

我的页面上有一个模式，里面有一个联系表格。无论如何，像邮件这样的字段应该是必需的，但它只是立即发送，即使这些字段没有填写......这怎么可能？

模态：

<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 脚本：

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

编辑： 我也有一个 main.js，向人们展示表单已发送：

    $(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

您错过了表单中的操作和方法：action="yourpage.php" method="POST"

action 指您的 php 页面，method 指您发送数据的方式，在这种情况下 POST 就像在您的 PHP 代码中一样，您有 $_POST['name']（等等）。

Submit 也应该是 inside Form 标签，而不是外部。

类似这样的：

<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>

参考：http://www.w3schools.com/tags/tag_form.asp

Answer 2

您必须在表单打开标记中提及表单方法和操作。然后检查输出。 例如，表单结构应该是这样的，

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