jQuery Watermarked input and validation

andreialecu picture andreialecu · Jun 4, 2009 · Viewed 10k times · Source

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

andreialecu picture andreialecu · Jun 4, 2009

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