Validate optional form fields with default values

Rain Lover · 10-22-2012, 06:35 PM

Sample form:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
$("#cname, #cemail, #curl, #ccomment").focus(function(){
  if( this.value == this.defaultValue ) {
    $(this).val("");
  }
}).blur(function() {
  if( !this.value.length ) {
    $(this).val(this.defaultValue);
  }
});
$.validator.addMethod("noName", function(value, element) {
return value != element.defaultValue;
}, "Please enter your name.");
$.validator.addMethod("noComment", function(value, element) {
return value != element.defaultValue;
}, "Please enter your comment.");
$("#commentForm").validate();
  }); 
  </script>
</head>
<body>
  <form id="commentForm" action="">
   <p>
     <input id="cname" name="name" size="25" class="required noName" value="Name">
   </p>
   <p>
     <input id="cemail" name="email" size="25" class="email" value="Email">
   </p>
   <p>
     <input id="curl" name="url" size="25" class="url" value="URL">
   </p>
   <p>
     <textarea id="ccomment" name="comment" rows="5" cols="35" class="required noComment">Comment</textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit">
   </p>
 </form>
</body>
</html>

If you click the submit button, you get error messages on Email and URL fields while they are optional. How can I prevent it?