Question

Here’s my javascript:

$("#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();

The actual form:

  <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>

And here’s a test: http://dl.dropbox.com/u/4017788/Labs/form-validation.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?

Answer 1

Simple approach: add an igonre class to Email and URL fields and removeClass / addClass on focus / blur. Test:
http://dl.dropbox.com/u/4017788/Labs/form_validation.html

see validate options for more information.

Alternatively you can completely get rid of the class attribute and then:

on focus >> this.className = ‘url’
on blur >> this.className = ”

without changing the validate call.