0

尝试在站点上创建一个表单，该表单在没有刷新页面的情况下进行验证，因此从这里使用 jquery validate ( 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 ("myemailaddress@somewhere.com", "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

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

4

1 回答 1

0 
 $('#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 中）。formData然后，您将在process.php中有一个变量，您需要将其parse_str放入一个数组中。然后，您可以在 process.php 中使用这些数组元素。

进程.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 ("myemailaddress@somewhere.com", "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>";
?>
于 2013-08-14T16:21:33.180 回答