爲什麼jquery跳過驗證並顯示成功？

Question

我有jquery，我正在使用驗證，它跳過驗證，它顯示成功，但我沒有輸入任何值的文本字段，因爲它必須是。任何人誰可以幫助請做。

這是我的jQuery。

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/zjquery.validate.js"> 
</script> 
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script> 
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script> 
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script> 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"> 
</script> 

</script> 
<style type="text/css"> 
    label.valid { 
    color: green !important; // !important added 
    } 
    label.error { 
    float: none; 
    color: red; 
    padding-left: .5em; 
    vertical-align: top; 
    } 

</style> 

<script> 
    $(document).ready(function() { 
    $('#results').hide(); 
    $("#contactform").validate({ 
     debug: false, 
     rules: { 
     fname: "required", 
     subject: "required", 
     email: "required", 
     message: "required", 
     email: { 
      required: true, 
      email: true 
     } 
     }, 
     messages: { 
     Paymentfrequency: "Select frequency", 
     fname: "Type name ", 
     subject: "Type surname ", 
     email: "invalid email",  
     message: "Select loan type",     
     }, 
     submitHandler: function(form) { 
     $.post('mailmeform.php', $("#contactform").serialize(), function(data) { 
      $('#contactform').fadeOut("slow"); 
      $('#results').fadeIn(2000); 
     }); 
     } 
    }); 
    }); 
</script> 

下面

是HTML

<table name="contacttable" border="0" width="100%"> 
<form id="contactform" action="mailmeform.php" method = "post"> 
<table> 
    <tr><td><label>Name:</label></td><td><input type = "text" name = "fname"></td></tr> 
    <tr><td><label>Subject:</label></td><td><input type = "text" name = "subject"></td></tr> 
    <tr><td><label class="required">Email:</label></td><td><input type = "text" name = "email" ></td></tr> 
    <tr><td><label>message:</label></td><td><textarea cols = 40 rows=5 name = "message"></textarea></td></tr> 
    <tr><td><input type = "submit" value = "send"></td></tr> 
    </h3> 
</form><tr> 
<td><div id ="results"><p>Thanks We will be back to you soon</p></div></td> 
</tr> 
</div> 
</table> 

Answer 1

無效的HTML就是爲什麼驗證被打破。不匹配的標籤，未封閉的標籤，在table內雜散</h3>和</div>標籤，但關鍵的錯誤是如何包裹<form>標籤你<table>周圍...

<table name="contacttable" border="0" width="100%"> 
    <form id="contactform" action="mailmeform.php" method = "post"> 
     <table> 
      <tr>...</tr> 
      <tr>...</tr> 
    </h3> 
    </form> 
     <tr>...</tr> 
    </div> 
</table> 

一旦HTML被清理乾淨，但jQuery驗證插件正常工作：

DEMO：http://jsfiddle.net/p2kLR/

---

而且，你包括插件兩次。刪除二審...

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"> 

，並在其中的jQuery兩次，刪除舊版本...

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> 

更多的東西是這樣的：

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> 
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script> 
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script> 
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script> 

Answer 2

您使用jQuery驗證插件Jquery Validate

只是嘗試在演示添加類，如：

class="required" 
class="required email" 

您加入jQuery驗證scripst兩次。刪除一個：按鈕

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"> 

Answer 3

試形式驗證單擊

$('#submit').click(function(){ 

//your code 

and if true 
$('#results').show(); 
}); 

和

$(document).ready(function(){ 
    $('#results').hide(); 
});