How to ignore default text in jQuery validation?

JavaScript
21

If you want the field values to remain, those field values will be submitted with the form.

22

OK. Here’s my attempts result:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
  <script>
  $(document).ready(function(){
$.validator.addMethod(
    'noName', function (value, element) {
        return value !== element.defaultValue;
    }, 'Please enter your name.'
);
$.validator.addMethod(
    'noEmail', function (value, element) {
        return value !== element.defaultValue;
    }, 'Please enter your Email.'
);$.validator.addMethod(
    'noComment', function (value, element) {
        return value !== element.defaultValue;
    }, 'Please enter your comment.'
);
    $("form").validate({
   success: "valid",
   submitHandler: function() { 
    if ($("#curl").val() == "URL")  
      $("#curl").val("");
      form.submit(); 
  } 
})   
  }); 
  </script>  
  
</head>
<body> 
  

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <input id="cname" name="name" size="25" class="required noName" value="Name" onfocus="if (this.value == 'Name') {this.value=''}" onblur="if(this.value == '') { this.value='Name'}" />
   </p>
   <p>
     <input id="cemail" name="email" size="25"  class="required noEmail email" value="Email" onfocus="if (this.value == 'Email') {this.value=''}" onblur="if(this.value == '') { this.value='Email'}" />
   </p>
   <p>
     <input id="curl" name="url" size="25"  class="" value="URL" onfocus="if (this.value == 'URL') {this.value=''}" onblur="if(this.value == '') { this.value='URL'}" />
   </p>
   <p>
     <textarea id="ccomment" name="comment" cols="22"  class="required noComment" onfocus="if (this.value == 'Comment') {this.value=''}" onblur="if(this.value == '') { this.value='Comment'}">Comment</textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
<script>
    $("form").submit(function() {
      if ($("#curl").val() != "URL") {
        $("#curl").addClass("url");
      }
else {$("#curl").removeClass("url");}
    });
</script>
</body>
</html>

How do you evaluate it? Is the coding correct?

23

The idea I tried to implement are:

  1. Validate the filed only if the user enters something
  2. Remove the word “URL” on a successful submission