Use $(el).val() instead of el.value for compatibility with plugins that define custom valHooks

[mathiasbynens]

Example use case: mathiasbynens/jquery-placeholder#29 (comment)

In my placeholder plugin, I patch val() through valHooks, so that it only returns the element’s value if the fake placeholder text is not being displayed at that point. That way, as long as you use .val(), you get the exact same behavior as you would in a browser that has a native placeholder implementation.

It would be awesome if your validation plugin would use $(el).val() instead of el.value, as it would improve compatibility with plugins like this that define custom valHooks.

[jzaefferer]

Unfortunately a simple search-and-replace is not enough, just tried that. Would you be able to help out with a pull request?

[mathiasbynens]

I actually tried before posting this issue: http://paste.pocoo.org/raw/556623/

But got stuck after some unit tests failed (specifically test/index.html?filter=validator%3A%20form()%3A%20selects%3A%20min%2Frequired) and I didn’t immediately see why. Any idea what’s up?

[fschroiff]

Found a viable workaround here: http://stackoverflow.com/a/9022318/281067
Define addMethod:

jQuery.validator.addMethod("placeholder", function(value, element) {
  return value!=$(element).attr("placeholder");
}, jQuery.validator.messages.required);

$("form").validate({
  rules: {
    username: {required: true, placeholder: true},
  },
  message: {
    username: {
      required: "Username required", placeholder: "Username required",
    },
  }
});

[mathiasbynens]

@fschroiff Cool, sounds like an idea!

However, it is possible that the user enters the placeholder text as input value, in which case the jQuery Validate plugin should still use the actual value.

For my specific plugin, it could be fixed using something like… (untested)

jQuery.validator.addMethod('placeholder', function(value, element) {
  return !$(element).hasClass('placeholder');
}, jQuery.validator.messages.required);

[mlynch]

Duplicate of #44