jquery validation plugin error placement

I am using Jquery Validation Plugin. Here's my question - I have a simple fo开发者_如何学Pythonrm which is like this

<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>

The validation script is customized like this -

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

The problem is, both the error messages are displayed in the first span tag. How can I correct that. Any suggestions as how to go about this?

Thanks!

---

Update the html to use label for

<label for="name">

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