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?

Possible duplicate of [How do I make an HTML text box show a hint when empty?](http://stackoverflow.com/questions/108207/how-do-i-make-an-html-text-box-show-a-hint-when-empty) — Szabolcs Páll, Jun 21 '16 at 12:48

score 6 · Answer 1 · answered Jun 04 '09 at 11:03

6

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

answered Jun 04 '09 at 11:03

andreialecu

3,639
3
28
36

Just a point - if someone types 'enter text...' into the box, what happens? Perhaps better to have a flag using the class of the element? – Alistair Evans Jun 04 '09 at 11:06
Your point is correct, but I'm not worried about someone entering enter text... in the textbox. I like the side effect of it not being allowed. :) – andreialecu Jun 04 '09 at 11:13

score 5 · Answer 2 · answered Nov 24 '10 at 01:41

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.");

score 3 · Accepted Answer · answered Jun 04 '09 at 10:54

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.

answered Jun 04 '09 at 10:54

Alistair Evans

36,057
7
42
54

Thanks, I figured out a solution based on your link. – andreialecu Jun 04 '09 at 11:01
Just noticed the answer. Thanks for posting the link and finding it useful! – JamesEggers Dec 20 '12 at 14:55

score 1 · Answer 4 · answered Sep 29 '10 at 10:13

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.

score 0 · Answer 5 · answered May 09 '13 at 22:09

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 "";
   }

jQuery Watermarked input and validation

5 Answers5

Linked