Entering and validating input using jQuery watermark

Question

On the HTML page, I have an input field that has a watermark on it when it is empty. (for example: "enter text here ..."). For example: http://digitalbush.com/projects/watermark-input-plugin/ - but written to order.

The problem is that I cannot figure out how to validate this field using the jQuery validation plugin ( http://docs.jquery.com/Plugins/Validation/ ) so that it processes my watermark text as if the field is empty.

I can not find the parameter in the jQuery validator to indicate a custom rule when the field is valid, is it there? I could find options that let me indicate whether the field should be checked based on user logic, but should not be confirmed.

What am I missing?

Answer 1

Post a blog post:

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

Tells you how to create your own validation rule for a field.

Answer 2

Thanks to Kazar for the link provided to me, 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 3

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

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

It uses the class name to display the watermark. (I'm not sure if the DigitalBrush version uses the class or not.) I modified the function above to use the jQuery hasClass () function to determine if the field is evaluated as “empty” based on the assigned classes.

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

Answer 4

By using unique watermark labels for each of your test suites (for example, "enter first name", "enter last name" ...), you can improve the script to:

 function noWatermark(value, element) { return value.toLowerCase() != element.defaultValue.toLowerCase(); } $.validator.addMethod("noWatermark", noWatermark, "required."); 

This also removes the hard text from the script.

Answer 5

You do not know how the validation plugin works, but it is a separate module that you can use.

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