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>