3

I am trying to use the jQuery Validation plugin (http://docs.jquery.com/Plugins/Validation/) in conjunction with field hinting.

The problem is that the field hinting puts text in the value attribute, and since there's text in the value attribute, the Validation plugin doesn't see that anything is wrong.

My thought was to have the validation throw an error if the field is empty OR if the field contains the same text as the field hint (ie: if someone were to enter "First Name" in the first name field, then an error would result.

Is there an elegant way to use validation in conjunction with code hinting?

Thanks!

Doron

Doron
  • 31
  • 1

1 Answers1

3

There are two kinds of "hinting" code (better known as a watermark or placeholder text): those that replace the value of a field and those that position some sort of element over the input to look as if the text is inside the input.

I presume you're using the first kind, so one simple (and best) solution is to avoid these kinds entirely, and switch to a plugin that employs the second method. There are a lot of plugins that work this way, such as this one, just be sure to read how they operate.

If changing the hinting code is not an option, then you have two other alternatives. Both are not ideal, but perhaps one will suit you more:

Clear values on submit

Within the hinting code, bind to the submit event of the form, and loop through all inputs to clear any that has the same value as the hint.

The problem with this method is that it must be executed before the validation plugin is initialised. It also won't work for validating fields as you type. You'll also have to check the inputs again after validation to put the hint text back.

Overide .val()

Since the validation plugin uses jQuery, you can overide jQuery's .val() function to return '' if the value is equal to the hint:

var oldVal = $.fn.val;
$.fn.val = function () {
    var returnVal = oldVal.call(this);
    if (returnVal == hintVal) returnVal = '';
    return returnVal;
};

The obvious downside of this is that the plugin must always use .val() to retrieve input values.

David Tang
  • 92,262
  • 30
  • 167
  • 149
  • Thanks for this! I am, however having a difficult time figuring out how to apply this to my current validation code, as the syntax you're including here looks nothing like the jQuery validate plugins's function initialization code. Also, is hintVal a variable that I need to declare earlier in my code? – Doron Feb 14 '11 at 22:41
  • @Doron, that code needs to be placed anywhere after jQuery is loaded. Yes, `hintVal` should be replaced by some variable that represents the value of the hint. If say the hint is in an attribute "hint" on the element, then replace `hintVal` with `this.attr('hint')`. – David Tang Feb 14 '11 at 22:55
  • The best it ever exists is to use the placeholder attribute from HTML5 standard. All modern browsers use it, except Internet Explorer, which makes this not feasible yet to use. I certainly regret switching to IE side over Netscape during the browser wars some years ago. :( – will824 Mar 15 '12 at 00:47