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

问题是，两条错误消息都显示在第一个 span 标签中。我该如何纠正。有什么建议可以解决这个问题吗？

谢谢！

Answer 1

更新html以使用标签

<label for="name">

试试 - http://jsfiddle.net/EUWEE/1/