javascript - 在此服务器上未找到所请求的 - 表单验证(Apache/2.4.9 (Win32) PHP/5.5.12 服务器在本地主机端口 80)

Question

我正在尝试使用 PHP、JQuery、HTML5 和 Bootstrap css 创建联系表单页面。PHP 用于发送邮件，JQuery 用于验证用户输入，Bootstrap css 用于突出显示输入字段。在我的代码中，我能够验证用户输入，但是当我点击提交按钮时没有任何反应。在我的 HTML 代码中，当我将表单 ID 从“id=contact-form”替换为表单时，我可以发送邮件但不会进行验证。请告诉我我做错了什么。

PHP Code-
 <?php

$name= $_POST['name'];
 $email= $_POST['email'];
  $Message= $_POST['Message'];

 $to=" s.nandan@niraame.com , shantanunandan8@gmail.com ";
  $from="";
   $subject="New query from customer ";
    $body = "Customer name : $name\n\n";
       $body .= "Customer Message : $Message\n\n";
        $body .= "Customer email id : $email\n\n";

 ini_set("SMTP","mail.niraame.com");
 mail($to,$subject,$from,$body);

?>

HTML Code- 

 <form method="post" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
    <div class="control-group">
        <label class="control-label" for="name">Name</label>
        <div class="controls">
            <input type="text" name="name" id="name" placeholder="Your name">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="email">Email Address</label>
        <div class="controls">
            <input type="text" name="email" id="email" placeholder="Your email address">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="subject">Subject</label>
        <div class="controls">
            <select id="subject" name="subject">
                <option value="na" selected="">Choose One:</option>
                <option value="service">Feedback</option>
                <option value="suggestions">Suggestion</option>
                <option value="support">Question</option>
                <option value="other">Other</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="message">Message</label>
        <div class="controls">
            <textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>
        </div>
    </div>
    <div class="form-actions">
        <input type="hidden" name="save" value="contact">
        <button type="submit" id="submit" class="btn btn-success">Submit Message</button>
        <button type="reset" class="btn">Cancel</button>
    </div>
</form>

JQuery Code- 

$(window).load(function(){
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();

$.post("contact-form-submission.php", {
name1: name,
email1: email,
mess age1: message,
contact1: contact
}, function(data) {
$("#returnmessage").append(data); // Append returned message to message paragraph.
if (data == "Your Query has been received, We will contact you soon.") {
$("#contact-form")[0].reset(); // To reset form fields on success.
}
});

$(document).ready(function () {
$('#contact-form').validate({
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: 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');
}
});
});
});

Answer 1

正如@jeroen 所提到的，目前您正在尝试在页面加载时发布表单。让我们尝试一种在用户单击提交按钮时提交表单的方法。

$(document).ready(function () {
  // let's attach an event handler to the form's submission
  $('#contact-form').submit(function(e) {
    e.preventDefault(); // prevent the form from submitting normally, this allows us to interject your client side validation

    // perform your validation

    // if valid, post
    // else show errors, etc
  }
});

此外，请记住最好在服务器和客户端上都执行验证。至少，始终在服务器上。