Question

I am using jquery validation plugin to validate a registration form.

Each text input field has instructions pre-filled as values in the input box

ex: for a text-input box id=’Name’, the default value will be set to ‘Enter Your Name’. I have pasted below sample code:

<input type="text" id="Name" value="Enter Your Name" onfocus="if(this.value == 'Your Name'){this.value = '';}" type="text" class="required" onblur="if(this.value == ''){this.value='Your Name';}" size="25" />

What I need to know is how to specify in the validation rule such that the plugin throws a required field error if the input box contains either the default message or empty values.

Help much appreciated.

Answer 1

I figured a way around the problem by creating a custom validation using validator.addMethod, which is really easy.

I have pasted a snippet of my validation block below:

   //1. Define custom validation 
    $(document).ready(function() 
    {
    jQuery.validator.addMethod("defaultInvalid", function(value, element) 
    {
     switch (element.value) 
     {
      case "Your Name": -- this will be the default value in the Name text box
       if (element.name == "Your Name")
          return false;
     }
    }
    //2. Include custom validation in the rules for your element
    $("#aspnetForm").validate(
    {
      rules: 
      {
       Name: "required defaultInvalid"
      },
      messages: 
      {
       Name: "Please input your name"
      }
    })
   }

I have used the same for all the elements which have default values in the form. This works great.