I'm using jquery validate plugin but the following code does not is not working - Anything I enter works.
I have spent many hours trying to figure it out and I have trimmed the code to have just one sample.
The "billtoFirstName" should have between 2 and 5 characters and should not validate when I enter more that 5 or 1 char. I get no errors and the submit reveals that whatever I enter is passed to the submit. I am stumped. How can I fix it to validate?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"> </script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<style>
#myTestForm{
font-size:20px;
border-color:black;
border-style:solid;}
#orderContactFormButton{
background-color: aqua;
float:right;
font-size: 14px;
font-weight:bold;
}
#orderContactBillTo{}
</style>
<script>
$( document ).ready(function(){
$("#myTestForm").submit(function(event){// for testing on submit
event.preventDefault(); // stop form from submitting normally
var sv = $("#billToFirstName").val();
alert(" submit button here first = " + sv);
});//submit
//validation options
$("#myTestForm").validate({
rules: {
billToFirstName:{
required:true,
minlength: 2,
maxlength: 5
}
},
messages: {
billToFirstName:{
required:"Please enter your first name",
minlength: "At least two characters are required",
maxlength: "At most 5 characters are allowed"
}
}
});//validate options for myTestform
});//document ready
</script>
</head>
<body>
<form id ="myTestForm">
<label for="billToFirstName" >First Name*:</label>
<input name ="biilToFirstName" id ="billToFirstName" size = 50>
<br>
<input id ="orderContactFormButton" type="submit" value="Submit"><br>
</form>
</body>
</html>
