使用jquery的表单验证发送，即使它失败并且没有将任何帖子数据发送到php

Question

[试图在网站上建立一个无需刷新页面即可验证的表单，因此请使用jquery从此处验证（http://jqueryvalidation.org/）

这是我的表格：

 <form id="contact-form" method="post" action="" name="contact-form" >
  <div class="row-fluid">
   <div class="control-group span4">
   <div class="controls">
    <input type="text" class="input-xlarge" name="name" maxlength="80" placeholder="Name (required)" id="name" />
   </div>
   </div>
   <div class="control-group span4">
   <div class="controls">
    <input type="text" name="email" maxlength="255" placeholder="Email Address (required)" />
   </div>
   </div>
   <div class="control-group span4">
   <div class="controls">
    <input type="text" name="subject" placeholder="Subject" />
    </div>
   </div>
  </div><!-- end row-fluid -->
  <div class="control-group">
  <div class="controls">
  <textarea name="message" placeholder="Message (required)"></textarea>
  </div>
  </div>
  <div class="form-actions">
  <input type="hidden" name="save" value="contact" />
   <input type="submit" name="submit2" value="Send Message" />   
   </div>
 </form>

这是我的javascript：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<script  type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.validator.setDefaults({
    errorClass : "help-inline"
});

    $('#contact-form').validate({
        rules: {
            name: {minlength: 2, required: true },
            email: {required: true, email: true },
            subject: {minlength: 2, required: true },
            message: {minlength: 2, required: true }
        },
        highlight: function(element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function(element) {
            element
            .text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
        },
        submitHandler: function(form) {
               // do other stuff for a valid form
               $.post('process.php', $("#contact-form").serialize(), function(data) {
               $("#contact-form").hide();
               $('#results').html(data);
               });
          }
  });

}); // end document.ready
</script>

这是process.php：

<?php
// check for form submission - if it doesn't exist then send back to contact form  
if (isset($_POST["save"]) || $_POST["save"] != "contact") { 
 // get the posted data  
$name = $_POST["name"];  
$email_address = $_POST["email"];
$subject = $_POST["subject"];   
$message = $_POST["message"]; 

// write the email content  
$email_content = "Name: $name\n";  
$email_content .= "Email Address: $email_address\n";
$email_content .= "Subject: $subject\n";
$email_content .= "Message:\n\n$message";  

// send the email  
mail ("[email protected]", "Contact form", $email_content); 
} 
print "Form submitted successfully: <br>Your name is <b>".$_GET['name']."</b> and your     email is <b>".$_GET['email']."</b><br>";
?>

虽然表单似乎在进行验证，但是您可以通过按“提交”按钮来覆盖它。行为应该是必须先填写字段，然后提交才能工作。即使填写了所有字段，该表单也会发送一封电子邮件，但其中没有任何字段。似乎POST无法在PHP中运行，或者javascript无法将其发送到process.php文件。所有这一切都基于此：http://developer-paradize.blogspot.co.uk/2013/06/jquery-validation-validate-and-submit.html

希望有人可以提供帮助。谢谢。

Answer 1

 $('#contact-form').validate({
    rules: {
        name: {minlength: 2, required: true },
        email: {required: true, email: true },
        subject: {minlength: 2, required: true },
        message: {minlength: 2, required: true }
    },
    highlight: function(element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function(element) {
        element
        .text('OK!').addClass('valid')
        .closest('.control-group').removeClass('error').addClass('success');
    },
    submitHandler: function(form) {
           // do other stuff for a valid form
           var formData = $('#contact-form').serialize();
           $.post('process.php', {formData:formData}, function(data) {
           $("#contact-form").hide();
           $('#results').html(data);
           });
      }
});

进行这些代码更改（在submitHandler中）。然后，在
process.php中将只有一个变量formData，您需要将其[放入数组中。然后，您可以在process.php中使用这些数组元素。
process.php
<?php
if (!empty($_POST['formData'])) {
  // get the posted data
  parse_str($_POST['formData'], $arrPOST);
  $name = $arrPOST["name"];  
  $email_address = $arrPOST["email"];
  $subject = $arrPOST["subject"];   
  $message = $arrPOST["message"]; 
  // write the email content  
  $email_content = "Name: $name\n";  
  $email_content .= "Email Address: $email_address\n";
  $email_content .= "Subject: $subject\n";
  $email_content .= "Message:\n\n$message";  
  // send the email  
  mail ("[email protected]", "Contact form", $email_content); 
} 
print "Form submitted successfully: <br>Your name is <b>".$arrPOST['name']."</b> and your email is <b>".$arrPOST['email']."</b><br>";
?>