PHP MySQL的JQuery表單不驗證在客戶端

Question

我有一個簡單的聯繫表單，提交到MySql上提交，我想在提交表單前驗證客戶端（我會實現服務器端驗證後，我得到客戶端工作）。出於某種原因，當我提交表單時，它會發布到數據庫，但不會啓動客戶端驗證。任何幫助，將不勝感激。

這是HTML（Twitter的引導）代碼：

<form action="/contact.php" method="post" id="contactUs"> 
    <div class="control-group"> 
     <label class="control-label" for="Name">NAME<sup>*</sup></label> 
     <div class="controls"> 
     <input type="text" class="span4" name="name" placeholder="Name" id="name"> 
     <span class="help-block"></span> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="Email">EMAIL<sup>*</sup></label> 
     <div class="controls"> 
     <input type="text" class="span4" name="email" placeholder="Email" id="email"> 
     <span class="help-block"></span> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="Subject">Subject<sup>*</sup></label> 
     <div class="controls"> 
     <input type="text" class="span4" name="subject" placeholder="Subject" id="subject"> 
     <span class="help-block"></span> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label for="textarea" class="control-label" for="Comment">COMMENTS<sup>*</sup></label> 
     <div class="controls"> 
      <textarea rows="5" class="span6" name="comments" id="message"></textarea> 
      <span class="help-block"></span> 
     </div> 
     </div> 
     <div class="control-group form-button-offset"> 
     <input type="submit" class="btn btn-large btn-primary pull-right" value="Send Message" /> 
    </div> 
     <input type="hidden" name="redirect" value="contact_us.html" /> 

<script src="js/jquery-1.9.0.min.js"></script> 
<script src="js/jquery.validate.min.js"></script> 
<script src="js/contactUs.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/bootstrap.min.js"></script> 

下面是用於contactUs.js的代碼：

$(document).ready(function(){ 
$('#contactUs').validate({ 
    rules: { 
     name: { 
      minlength: 4, 
      required: true 
     }, 
     email: { 
      required: true, 
      email: true, 
     }, 
     subject: { 
      minlength: 5, 
      required: true 
     }, 
     submission_Reason: { 
      minlength: 5, 
      required: true 
     }, 
     comments: { 
      minlength: 8, 
      required: true, 
     } 
    }, 
    messages: { 
     name: "Please enter your first and last name", 
     email: "Please enter a valid email address", 
     subject: "Please enter a subject", 
     comments: "Please enter a short message", 
    }, 
    highlight: function (element, errorClass, validClass) { 
     $(element).closest('.control-group').removeClass('success').addClass('error'); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
     $(element).closest('.control-group').removeClass('error').addClass('success'); 
    }, 
    success: function (label) { 
     $(label).closest('form').find('.valid').removeClass("invalid"); 
    }, 
    errorPlacement: function (error, element) { 
     element.closest('.control-group').find('.help-block').html(error.text()); 
    } 
}); 
}; 

和PHP接觸。 php文件：

<?php 

$con=mysqli_connect("host","username","password","dbname"); 

// Check connection 
if (mysqli_connect_errno()) 
    { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
    } 

$sql="INSERT INTO contactUs (name, email, subject, comments) 
VALUES 
('$_POST[name]','$_POST[email]','$_POST[subject]','$_POST[comments]')"; 

$sql="INSERT INTO contactUs (`date_created`) VALUES (now())"; 

if (!mysqli_query($con,$sql)) 
    { 
    die('Error: ' . mysqli_error($con)); 
    } 
echo "Your form has been received, Thank you!"; 

mysqli_close($con); 

?> 

當我提交了客戶端驗證，則不會觸發形式，其結果是：

• 形式獲取提交併發佈到DB
• 我得到：您的表格已收到，謝謝！

我在做什麼錯？爲什麼不驗證發生？

Answer 1

試試這個

$.validator.setDefaults(
{ 
    submitHandler: function() { submit(); }, 
    showErrors: function(map, list) 
    { 
     this.currentElements.parents('label:first, .controls:first').find('.error').remove(); 
     this.currentElements.parents('.control-group:first').removeClass('error'); 

     $.each(list, function(index, error) 
     { 
      var ee = $(error.element); 
      var eep = ee.parents('label:first').length ? ee.parents('label:first') : ee.parents('.controls:first'); 

      ee.parents('.control-group:first').addClass('error'); 
      eep.find('.error').remove(); 
      eep.append('<p class="error help-block"><span class="label label-important">' + error.message + '</span></p>'); 
     }); 
     //refreshScrollers(); 
    } 
}); 

$.validator.setDefaults(
{ 
    submitHandler: function() { submit(); }, 
    showErrors: function(map, list) 
    { 
     this.currentElements.parents('label:first, .controls:first').find('.error').remove(); 
     this.currentElements.parents('.control-group:first').removeClass('error'); 

     $.each(list, function(index, error) 
     { 
      var ee = $(error.element); 
      var eep = ee.parents('label:first').length ? ee.parents('label:first') : ee.parents('.controls:first'); 

      ee.parents('.control-group:first').addClass('error'); 
      eep.find('.error').remove(); 
      eep.append('<p class="error help-block"><span class="label label-important">' + error.message + '</span></p>'); 
     }); 
     //refreshScrollers(); 
    } 
}); 

$(function() 
{ 
    // validate signup form on keyup and submit 
    $("#validateSubmitForm").validate({ 
     rules: { 
     name: { 
      minlength: 4, 
      required: true 
     }, 
     email: { 
      required: true, 
      email: true, 
     }, 
     subject: { 
      minlength: 5, 
      required: true 
     }, 
     submission_Reason: { 
      minlength: 5, 
      required: true 
     }, 
     comments: { 
      minlength: 8, 
      required: true, 
     } 
     }, 
     messages: { 
     name: "Please enter your first and last name", 
     email: "Please enter a valid email address", 
     subject: "Please enter a subject", 
     comments: "Please enter a short message" 
    }); 

    // propose username by combining first- and lastname 
    $("#username").focus(function() { 
     var firstname = $("#firstname").val(); 
     var lastname = $("#lastname").val(); 
     if(firstname && lastname && !this.value) { 
      this.value = firstname + "." + lastname; 
     } 
    }); 

    //code to hide topic selection, disable for demo 
    var newsletter = $("#newsletter"); 
    // newsletter topics are optional, hide at first 
    var inital = newsletter.is(":checked"); 
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); 
    var topicInputs = topics.find("input").attr("disabled", !inital); 
    // show when newsletter is checked 
    newsletter.click(function() { 
     topics[this.checked ? "removeClass" : "addClass"]("gray"); 
     topicInputs.attr("disabled", !this.checked); 
    }); 
});