When applying jquery.maskedinput to an input which is validated with jquery.validate, jquery.validate incorrectly interprets the input as being required should focus to the input element ever occur. How can I prevent this effect?
Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery validation with mask</title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js" type="text/javascript"></script>
<!-- Using jquery.validate 1.9.0 -->
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="additional-methods.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var validate = $("#myForm").validate({
rules: {phone:'phoneUS'},
messages: {phone:'Enter a valid phone number'},
submitHandler: function(form) {alert('submit');}
});
$("#phone").mask("(999) 999-9999");
});
</script>
</head>
<body>
<form id="myForm" method="get" action="">
<label for="phone">Phone</label>
<input id="phone" name="phone" type='text' />
<input type="submit" value="Submit" class="submit" />
</form>
</body>
</html>
