jquery驗證插件錯誤放置

Question

我正在使用Jquery驗證插件。我的問題是 - 我有一個簡單的形式是這樣的

<form id="form"> 
    <label>Name</label> 
     <input type="text" name="name" id="name" class="required" minlength="2"> 
    <span></span> 
    <label>Surname</label> 
     <input type="text" name="surname" id="surname" class="required" minlength="2> 
    <span></span> 
    <input type="submit" value="submit"> 
</form> 

驗證腳本定製這樣的 -

$(function(){ 
$("#form").validate({ 
    messages: { 
     name: "Please enter name.", 
     surname: "Please enter surname."  
    }, 
    errorElement: "span", 
    errorPlacement: function(error, element) { 
      error.insertAfter(element); 
     } 
}); 
}); 

的問題是，無論是錯誤消息顯示在第一跨度標籤。我該如何改正這一點。任何建議如何去做這件事？

謝謝！

Answer 1

更新HTML使用標籤

<label for="name"> 

嘗試 - http://jsfiddle.net/EUWEE/1/