bassistance.de validate plugin. Error messages not showing

bassistance.de validate plugin. Error messages not showing

I am trying this validate plugin for the first time using a tutorial from 'jQuery for Designers' by Natalie Maclees. I have now got a test form with a custom error message held in a <label> tag but it does not seem to be working. I am only getting the default message of 'This field is required'. 

Can any one see where I am going wrong. Below is the top part of the page showing the first fieldset of the form with a custom error message for the username field.

<title>Test Form</title>
<style>
form p {
width: 600px;
clear: both;
padding-bottom: 10px;
}
.text-fields label {
float: left;
width: 100px;
}
.text-fields input {
float: left;
width: 250px;
height: 20px;
padding:1px;
margin-bottom: 15px;
}

li {
list-style: none;
}
label.error {
display: none;
width: 360px;
color: rgba(246,144,28,1.00);
margin-top: 5px;
}
</style>
<script type="text/javascript" src="lib/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$('#username').focus();
$('#account-form').validate();
});
</script>
</head>

<body>
<form action="#" id="account-form">
<fieldset class="text-fields">
<legend>My Account</legend>
<p><label for="username">username</label>
<input type="text" name="username" id="username" class="required" placeholder="At least 5 characters" minlength="5" maxlength="20" ></p>
<label for="username" class="error">A username is required</label>
<p><label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="choose a secure password" class="required"></p>
</fieldset>

// Rest of form

<input type="submit">
</form>