jQuery Watermarked input and validation

Question

On a HTML page I have an inputbox that has a 'watermark' on it when it is empty. (eg: "enter text here..."). Kind of like this: http://digitalbush.com/projects/watermark-input-plugin/ - but custom written.

The problem is that I can't figure out how to validate this field with the jQuery validation plugin (http://docs.jquery.com/Plugins/Validation/) so that it treats my watermark text as if the field was empty.

I can't find an option in the jQuery validator to let me specify a custom rule for when a field is valid, is there one? I could find options that allow me to specify whether a field needs to be validated based on custom logic, but not how it should be validated.

What am I missing?

Answer 1

When using unique watermark labels for each of your testboxes (For example 'enter firstname', 'enter last name'...), you could improve the script to:

function noWatermark(value, element) {
        return value.toLowerCase() != element.defaultValue.toLowerCase();
    }

$.validator.addMethod("noWatermark", noWatermark, "required.");

This also removes the hardcoded text from your script.

Answer 2

Not sure how the validation plugin works, but this is a separate module that is usable.

   var SetWatermark = function( oElemToWatermark, sWatermark )
   {
      var CheckFocus = function(oEvent)
      {
         var oElem = $(this);

         if ( oElem.val() == oElem.data("Watermark") )
            oElem.val("").css("color", "");
      }

      var CheckBlur = function(oEvent)
      {
         var oElem = $(this);

         if ( oElem.val().length == 0 )
            oElem.val( oElem.data("Watermark") ).css("color", "Grey");
      }

      // HTML5 (simple route)
      if ( oElemToWatermark[0].placeholder != undefined )
         oElemToWatermark[0].placeholder = sWatermark;

      // pre HTML5 (manual route)
      else if (oElemToWatermark.data("Watermark") == undefined)
         oElemToWatermark  .data("Watermark", sWatermark)
                           .val(sWatermark)
                           .on("focus", CheckFocus )
                           .on("blur",  CheckBlur  );
   }

   var GetWatermarkText = function(oElem)
   {
      if (oElem[0].plaeholder != undefined)
         return oElem[0].placeholder;
      else if ( oElem.data("Watermark") != undefined )
         return oElem.data("Watermark");
      else
      { 
         alert("The element " + oElem[0].id + " does not have a Watermark value.");
         return "";
      }
   }

   var GetWatermarkValue = function(oElem)
   {
      var sVal       = oElem.val();
      var sWatermark = oElem.data("Watermark");

      if (oElem[0].placeholder   != undefined 
      ||  sWatermark             == undefined 
      ||  sWatermark             != sVal)
         return sVal;
      else if (sVal == sWatermark)
         return "";
   }

Answer 3

Check out this blog post:

http://randomactsofcoding.blogspot.com/2008/10/starting-with-jquery-how-to-write.html

Tells you how to construct a custom validation rule for a field.

Answer 4

Thanks to Kazar for providing me with the link, I came up with the following solution (if anyone is interested):

    function notWatermark(value, element){
        return value != 'enter text...';
    }

    $.validator.addMethod("notWatermark", notWatermark, "Field cannot be empty.");

    $('#SearchForm').validate({
        rules: {
            SomeField: {
                required: true,
                notWatermark: true
            }
         },

Answer 5

I'm using the Watermark plugin for jQuery, but my situation was similar:

http://code.google.com/p/jquery-watermark/

It uses a classname for the display of the watermark. (I'm not sure if the DigitalBrush version uses a class or not.) I've modified the above function to use jQuery's hasClass() function to determine whether or not the field is evaluated as "empty" based on currently assigned classes.

function notWatermark(value, element){
 return !$(element).hasClass("waterMarkClass");
}
$.validator.addMethod("notWatermark", notWatermark, "Required.");