Javascript 在此服务器上找不到请求的表单验证（位于localhost端口80的Apache/2.4.9（Win32）PHP/5.5.12服务器）

我正在尝试使用PHP、JQuery、HTML5和引导css创建一个联系人表单页面。 PHP发送邮件，JQuery验证用户输入，引导css突出显示输入字段。 在我的代码中，我能够验证用户输入，但当我单击submit按钮时，什么也没有发生。 在我的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');
}
});
});
});

PHP代码-
HTML代码-
名称
电子邮件地址
主题
选择一个：
反馈
暗示
问题:
其他
消息
提交消息
取消
JQuery代码-
$（窗口）。加载（函数（）{
var name=$（“#name”）.val（）；
var email=$（“#email”）.val（）；
var message=$（“#message”）.val（）；
var contact=$（“#contact”）.val（）；
$.post（“contact form submission.php”{
名字1：名字，
email1:email，
第1集：信息，
联系人1：联系人
}，函数（数据）{
$（“#returnmessage”）.append（data）；//将返回的消息附加到消息段落。
如果（数据==“您的查询已收到，我们将很快与您联系。”）{
$（“#联系人表单”）[0].reset（）；//成功时重置表单字段。
}
});
$（文档）.ready（函数（）{
$（“#联系方式”）。验证({
规则：{
姓名：{
最小长度：2，
必填项：true
},
电邮：{
要求：正确，
电子邮件：真的
},
信息：{
最小长度：2，
必填项：true
}
},
亮点：功能（元素）{
$（元素）。最近的（'.control group'）。removeClass（'success'）。addClass（'error'）；
},
成功：功能（元素）{
element.text（'OK！'）.addClass（'valid'）
.closest（'.control group'）.removeClass（'error'）.addClass（'success'）；
}
});
});
});

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

$(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
  }
});

---

另外，请记住，在服务器和客户机上执行验证是最佳实践。至少，始终在服务器上。

您的逻辑似乎是错误的，您正在以页面加载方式提交表单，而不是使用验证器的成功功能。@jeroen先生，我对JQuery非常陌生，我尝试了这段代码，但我无法找到我在做什么wrong@jeroen在任何情况下，我都希望从用户那里接收数据，无论是正确的还是错误的，这就是我在页面加载时编写提交代码的原因。验证只是通知用户他输入了错误的数据，如果他愿意，他可以纠正它。