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