Develop Reference

Placeholder not work on IE9 [duplicate]

It seems it's a very well known problem but all the solutions I found on Google don't work on my newly downloaded IE9.
Which is your favorite way in order to enable the Placeholder property on the input and textarea tags?
Optional: I lost a lot of time on that and didn't look for the required property yet. Would you also have some advice for this? Obviously I can check the value in PHP, but to help the user this property is very convenient.

HTML5 Placeholder jQuery Plugin
- by Mathias Bynens (a collaborator on HTML5 Boilerplate and jsPerf)
https://github.com/mathiasbynens/jquery-placeholder
Demo & Examples
http://mathiasbynens.be/demo/placeholder
p.s
I have used this plugin many times and it works a treat. Also it doesn't submit the placeholder text as a value when you submit your form (... a real pain I found with other plugins).

I think this is what you are looking for: jquery-html5-placeholder-fix
This solution uses feature detection (via modernizr) to determine if placeholder is supported. If not, adds support (via jQuery).

If you want to do it without using jquery or modenizer you can use the code below:
(function(){
"use strict";
//shim for String's trim function..
function trim(string){
return string.trim ? string.trim() : string.replace(/^\s+|\s+$/g, "");
}
//returns whether the given element has the given class name..
function hasClassName(element, className){
//refactoring of Prototype's function..
var elClassName = element.className;
if(!elClassName)
return false;
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
return regex.test(element.className);
}
function removeClassName(element, className){
//refactoring of Prototype's function..
var elClassName = element.className;
if(!elClassName)
return;
element.className = elClassName.replace(
new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
}
function addClassName(element, className){
var elClassName = element.className;
if(elClassName)
element.className += " " + className;
else
element.className = className;
}
//strings to make event attachment x-browser..
var addEvent = document.addEventListener ?
'addEventListener' : 'attachEvent';
var eventPrefix = document.addEventListener ? '' : 'on';
//the class which is added when the placeholder is being used..
var placeHolderClassName = 'usingPlaceHolder';
//allows the given textField to use it's placeholder attribute
//as if it's functionality is supported natively..
window.placeHolder = function(textField){
//don't do anything if you get it for free..
if('placeholder' in document.createElement('input'))
return;
//don't do anything if the place holder attribute is not
//defined or is blank..
var placeHolder = textField.getAttribute('placeholder');
if(!placeHolder)
return;
//if it's just the empty string do nothing..
placeHolder = trim(placeHolder);
if(placeHolder === '')
return;
//called on blur - sets the value to the place holder if it's empty..
var onBlur = function(){
if(textField.value !== '') //a space is a valid input..
return;
textField.value = placeHolder;
addClassName(textField, placeHolderClassName);
};
//the blur event..
textField[addEvent](eventPrefix + 'blur', onBlur, false);
//the focus event - removes the place holder if required..
textField[addEvent](eventPrefix + 'focus', function(){
if(hasClassName(textField, placeHolderClassName)){
removeClassName(textField, placeHolderClassName);
textField.value = "";
}
}, false);
//the submit event on the form to which it's associated - if the
//placeholder is attached set the value to be empty..
var form = textField.form;
if(form){
form[addEvent](eventPrefix + 'submit', function(){
if(hasClassName(textField, placeHolderClassName))
textField.value = '';
}, false);
}
onBlur(); //call the onBlur to set it initially..
};
}());
For each text field you want to use it for you need to run placeHolder(HTMLInputElement), but I guess you can just change that to suit! Also, doing it this way, rather than just on load means that you can make it work for inputs which aren't in the DOM when the page loads.
Note, that this works by applying the class: usingPlaceHolder to the input element, so you can use this to style it (e.g. add the rule .usingPlaceHolder { color: #999; font-style: italic; } to make it look better).

Here is a much better solution.
http://bavotasan.com/2011/html5-placeholder-jquery-fix/
I've adopted it a bit to work only with browsers under IE10
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<script>
// Placeholder fix for IE
$('.lt-ie10 [placeholder]').focus(function() {
var i = $(this);
if(i.val() == i.attr('placeholder')) {
i.val('').removeClass('placeholder');
if(i.hasClass('password')) {
i.removeClass('password');
this.type='password';
}
}
}).blur(function() {
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder')) {
if(this.type=='password') {
i.addClass('password');
this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
//if($(this).validationEngine('validate')) { // If using validationEngine
$(this).find('[placeholder]').each(function() {
var i = $(this);
if(i.val() == i.attr('placeholder'))
i.val('');
i.removeClass('placeholder');
})
//}
});
</script>
...
</html>

If you want to input a description you can use this. This works on IE 9 and all other browsers.
<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>

Using mordernizr to detect browsers that are not supporting Placeholder, I created this short code to fix them.
//If placeholder is not supported
if (!Modernizr.input.placeholder){
//Loops on inputs and place the placeholder attribute
//in the textbox.
$("input[type=text]").each( function() {
$(this).val($(this).attr('placeholder'));
})
}

I know I'm late but I found a solution inserting in the head the tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->

to make it work in IE-9 use below .it works for me
JQuery need to include:
jQuery(function() {
jQuery.support.placeholder = false;
webkit_type = document.createElement('input');
if('placeholder' in webkit_type) jQuery.support.placeholder = true;});
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text, textarea, :password').focus(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text, textarea, :password').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
CSS Style need to include:
.hasPlaceholder {color: #aaa;}

A bit late to the party but I use my tried and trusted JS that takes advantage of Modernizr. Can be copy/pasted and applied to any project. Works every time:
// Placeholder fallback
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}

I usually think fairly highly of http://cdnjs.com/ and they are listing:
//cdnjs.cloudflare.com/ajax/libs/placeholder-shiv/0.2/placeholder-shiv.js
Not sure who's code that is but it looks straightforward:
document.observe('dom:loaded', function(){
var _test = document.createElement('input');
if( ! ('placeholder' in _test) ){
//we are in the presence of a less-capable browser
$$('*[placeholder]').each(function(elm){
if($F(elm) == ''){
var originalColor = elm.getStyle('color');
var hint = elm.readAttribute('placeholder');
elm.setStyle('color:gray').setValue(hint);
elm.observe('focus',function(evt){
if($F(this) == hint){
this.clear().setStyle({color: originalColor});
}
});
elm.observe('blur', function(evt){
if($F(this) == ''){
this.setValue(hint).setStyle('color:gray');
}
});
}
}).first().up('form').observe('submit', function(evt){
evt.stop();
this.select('*[placeholder]').each(function(elm){
if($F(elm) == elm.readAttribute('placeholder')) elm.clear();
});
this.submit();
});
}
});

I searched on the internet and found a simple jquery code to handle this problem. In my side, it was solved and worked on ie 9.
$("input[placeholder]").each(function () {
var $this = $(this);
if($this.val() == ""){
$this.val($this.attr("placeholder")).focus(function(){
if($this.val() == $this.attr("placeholder")) {
$this.val("");
}
}).blur(function(){
if($this.val() == "") {
$this.val($this.attr("placeholder"));
}
});
}
});

Implementing Placeholder solution with jquery

I am trying to use one of the IE9 IE8 placeholder solutions, but i have an error showing in IE9 test setup with the code. The solution i am using is clearly working for many people according to the comments and updates in github, but I have a fundamental problem getting the code recognised.
I have this line in my page header, which should allow me to use jquery. Indeed i am running other jquery functions and they seem to be working:
<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Also in the head i have this (again all the other functions in my myjs.js are showing in developer tools and are available as required):
<!-- my java code link -->
<script src="/js/myjs.js"></script>
The function that i am using for the placeholder solution is this one:
placeholderSupport = ("placeholder" in document.createElement("input"));
if (!placeholderSupport) {
//This browser does not support the placeholder attribute
//use javascript instead
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() === '' || input.val() === input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
input.val('');
}
})
});
}
The error that i am getting from IE9 developer tools is this:
Invalid App Id: Must be a number or numeric string representing the application id.
The error is showing on the line of code that looks like this, specifically the dollar sign:
$('[placeholder]').focus(function() {
From my reading I thought that the $ start was a function of the jquery library, which i beleive to be present and working, but i am obviously missing a trick. Can anybody help please. Thanks for any guidance.

Try this code, It works IE8+
UPDATED: to match all inputs and textarea
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function () {
jQuery.support.placeholder = false;
test = document.createElement('input');
if ('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function () {
if (!$.support.placeholder) {
var active = document.activeElement;
$('input,textarea').focus(function () {
if ($(this).attr('placeholder') !== '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('has-placeholder');
}
}).blur(function () {
if ($(this).attr('placeholder') !== '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('has-placeholder');
}
});
$('input,textarea').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$('input.has-placeholder,textarea.has-placeholder').val('');
});
}
});
Plus CSS
.has-placeholder {
color:#777 /*whatever you like*/
}

Here is the final code using Dippas' answer with the extras to cover textareas and inputs that have type='tel' rather than type='text'. This seems to cover everything on my form, but there might be other input types that need adding at other times. I'm sure that somebody who knows what they are doing can trim this down by sorting out some of the duplicate code.
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if ('placeholder' in test) jQuery.support.placeholder = true;});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
if (!$.support.placeholder) {
var active = document.activeElement;
$('textarea').focus(function() {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('has-placeholder');
}
}).blur(function() {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('has-placeholder');
}
});
$('textarea').blur();
$(active).focus();
$('form:eq(0)').submit(function() {
$('textarea.has-placeholder').val('');
});
$('input').focus(function() {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('has-placeholder');
}
}).blur(function() {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('has-placeholder');
}
});
$('input').blur();
$(active).focus();
$('form:eq(0)').submit(function() {
$('input.has-placeholder').val('');
});
}
});

Jquery default value in password field

I am using this Jquery plugin for populating inputs with text that disappears on click. It isn't ideal for password fields because everything shows up as dots. What would be a good way to make a default text visible in password fields before you start typing?

Through JS, my answer would be the same as #ultimatebuster's. However, the whole JS route is hacky, now that alternatives started appearing. Many modern browsers now support this thing directly through HTML5:
<input type="password" name="password" placeholder="Enter password"/>
(Many modern browsers = every major one except the Internet Explorer. I refuse to code for it; if you have to have the same thing in IE as well, you'll have to go the hacky route.)

You could set the type of the input field as password. However, set it to normal via javascript upon page load (this way you can fallback easily if the user doesn't have JS). Once it receives a click, set the type of the input field back to a password.

Like suggested, you can swap the inputs, but it doesn't work in IE. IE won't allow it since it may be some sort of security hole.
I used to use this:
/* From: http://grzegorz.frydrychowicz.net/jquery_toggleformtext/
Modified to swap password textbox type so watermark can be read */
$(document).ready(function() {
if (!jQuery.browser.msie) {
$("input:password").each(function() {
if (this.value == '') {
this.type = "text";
}
$(this).focus(function() {
this.type = "password";
});
$(this).blur(function() {
if (this.value == '') {
this.type = "text";
}
});
});
}
$("input:text, textarea, input:password").each(function() {
if (this.value == '') {
$(this).addClass("watermark");
this.value = this.title;
}
});
$("input:text, textarea, input:password").focus(function() {
$(this).removeClass("watermark");
if (this.value == this.title) {
this.value = '';
}
});
$("input:text, textarea, input:password").blur(function() {
if (this.value == '') {
$(this).addClass("watermark");
this.value = this.title;
}
});
$("input:image, input:button, input:submit").click(function() {
$(this.form.elements).each(function() {
if (this.type == 'text' || this.type == 'textarea' || this.type == 'password') {
if (this.value == this.title && this.title != '') {
this.value = '';
}
}
});
});
});
I finally just gave up an went with the normal password input behavior. I found the above input swapping to be a bit quirky, but you can give it a shot.

Showing Placeholder text for password field in IE

I know there is a ton of placeholder questions, but I am trying to perfect mine.
My current code works great and does what it's supposed to. The problem is, when I go to place the "password" placeholder, it puts the placeholder in the masking characters. Any ideas on how to get around that?
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
var active = document.activeElement;
$(':password').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':password').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
My field for the pass:
<div id="loginform_pass"><input class="login" tabindex="2" type="password" placeholder="Password" name="password" maxlength="30"></div>

You could also try this... it detects that the browser does not have support for placeholder and works for all input types
function FauxPlaceholder() {
if(!ElementSupportAttribute('input','placeholder')) {
$("input[placeholder]").each(function() {
var $input = $(this);
$input.after('<input id="'+$input.attr('id')+'-faux" style="display:none;" type="text" value="' + $input.attr('placeholder') + '" />');
var $faux = $('#'+$input.attr('id')+'-faux');
$faux.show().attr('class', $input.attr('class')).attr('style', $input.attr('style'));
$input.hide();
$faux.focus(function() {
$faux.hide();
$input.show().focus();
});
$input.blur(function() {
if($input.val() === '') {
$input.hide();
$faux.show();
}
});
});
}
}
function ElementSupportAttribute(elm, attr) {
var test = document.createElement(elm);
return attr in test;
}

Could you just swap out the original text field with a password field?
$('#pass').focus(
function(){
var pass = $('<input id="pass" type="password">');
$(this).replaceWith(pass);
pass.focus();
}
);
<input id="pass" type="text" value="Passowrd">
http://jsfiddle.net/UrNFV/

I ran into this problem with IE before. Here's my solution :)
http://jsfiddle.net/mNchn/

If I'm understanding this right, you want the field to say "Password" when nothing has been typed into it; however, "Password" gets displayed as "********".
A decent fix to that (which also degrades gracefully, depending on how you code it) is to:
Put a LABEL before the password INPUT. Set the LABEL's text to "Password", and set its for attribute to point to the INPUT's ID, so that the INPUT is focused when the LABEL is clicked.
Use CSS to position the LABEL on top of the INPUT, so that they overlap, and it looks like "Password" is inside of the INPUT.
Make it so that the LABEL is only visible when some CSS class (.showMe, for example) is applied to it.
Use JavaScript to hide the LABEL
...if the INPUT's value is an empty string
...or if the user has selected (focused) the INPUT.

Depending on whether or not you want to be able to dynamically change the text inside the placeholder, your simplest solution might be to have the placeholder text be an image.
input {
background: url(_img/placeholder.png) 50% 5px no-repeat;
.
.
.
}
input:focus {
background: none;
}
Clearly there are many different ways of using this method, and you will have to use some kind of a fix to get :focus to work on the browsers that don't support it.

Here my plugin :
if(jQuery.support.placeholder==false){
// No default treatment
$('[placeholder]').focus(function(){
if($(this).val()==$(this).attr('placeholder'))
$(this).val('');
if($(this).data('type')=='password')
$(this).get(0).type='password';
});
$('[placeholder]').blur(function(){
if($(this).val()==''){
if($(this).attr('type')=='password'){
$(this).data('type','password').get(0).type='text';
}
$(this).val($(this).attr('placeholder'));
}
}).blur();
}

I had the same problem so i wrote a little plugin
$.fn.passLabel = function(){
var
T = $(this),
P = T.find('input[type=password]'),
V = pass.val();
P.attr('type','text');
P.focus(function(){
if(V == "")
P.attr('type','password');
});
}
now you just call it for the from at it will find all input fields with the password
attribute.
eg.
$('form').passLabel();

A bit late however same here, i was working on the issue too IE9 doesnot show the password placeholder as text, in almost all the answers on the internet some suggest changing the type some but if u do this u will have another issue on the login page like when you will see with double click on password field as its type changed to text from password, btw it works with prop. e.g. prop("type","password") if you want to change the type of an element.
on the other hand i think most answers come from a single solution its like focus and blur actions of elements. but when u apply this plugin other text fields will also be effected there is no specific or i can say generlized solution, i have still a minor issue on the login page with the password field but its showing the text correctly. anyway. here is how i have configured, copied,changed and/or another inherited anwers here.
(function($) {
$.fn.placeholder = function() {
$('input[placeholder], textarea[placeholder]').focus(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
if (input.prop("id") === "password") {
input.prop("type", "password");
}
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() === '' || input.val() === input.attr('placeholder')) {
input.addClass('placeholder');
if (input.prop("type") === "password") {
input.prop("type", "text");
}
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('input[placeholder], textarea[placeholder]').each(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
input.val('');
}
});
});
};
})(jQuery);
still an active prolem ... :D

jQuery Validation and Placeholder conflict

I'm using the jQuery Validation plugin to validate a form on my site.
http://docs.jquery.com/Plugins/Validation
I'm also using the following code to provide Placeholder support for browsers that do not support the HTML5 placeholder="" attribute.
// To detect native support for the HTML5 placeholder attribute
var fakeInput = document.createElement("input"),
placeHolderSupport = ("placeholder" in fakeInput);
// Applies placeholder attribute behavior in web browsers that don't support it
if (!placeHolderSupport) {
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '') {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() { //line 20
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
});
}
When I submit my form, the following things happen:
In browsers that support the placeholder attribute, the validate() function fires and everything works like it is supposed to.
In browsers that do not support the placeholder attribute, lines 20-25 clear all the "placeholders" and then the validate() function fires. If there are no errors, the page submits and everything works like it is supposed to.
In unsupported browsers, in the event that there are errors, the appropriate fields get applied class="error" like usual -- but the placeholder text doesn't come back until the blur() event happens on a particular field. This leaves those fields blank -- and since there's no labels (just the placeholder attribute) users are left to guess at what each empty field is supposed to contain until the blur() event happens.
The other problem that unsupported browsers have is that since the placeholder fix modifies the value attribute to display the placeholder, fields that are marked as required pass validation when they should be failing.
It seems there's no easy way to use the Validation plugin with the placeholder support code.
I'm looking to either modify the placeholder support code or add a submitHandler: {} function as a parameter to the validate() function to get this working in unsupported browsers.

I ran into a similar issue. Have you gotten yours to work? I'd love to compare notes.
FWIW, here's what I did:
jsfiddle demo here.
Add input placeholders to the jQuery support object:
$.support.placeholder = (function() {
var i = document.createElement( 'input' );
return 'placeholder' in i;
})();
The placeholder chain:
$('input')
.addClass('hint')
.val( function() {
if ( !$.support.placeholder ) {
return $(this).attr('placeholder');
}
})
.bind({
focus: function() {
var $this = $(this);
$this.removeClass('hint');
if ( $this.val() === $this.attr('placeholder') ) {
$this.val('');
}
},
blur: function() {
var $this = $(this),
// Trim whitespace if only space characters are entered,
// which breaks the placeholders.
val = $.trim( $this.val() ),
ph = $this.attr('placeholder');
if ( val === ph || val === '' ) {
$this.addClass('hint').val('');
if ( !$.support.placeholder ) {
$this.val(ph);
}
}
}
});
Add a new validation rule
addMethod docs
$.validator.addMethod('notPlaceholder', function(val, el) {
return this.optional(el) || ( val !== $(el).attr('placeholder') );
}, $.validator.messages.required);
Include the new method in the validate rules object
$('form').validate({
rules: {
name: {
required: true,
notPlaceholder: true
},
email: {
required: true,
notPlaceholder: true,
email: true
}
}
});

I think adding this to jquery.validate.js, to the required function (line 900), is best:
required: function(value, element, param) {
// Our change
if (element.value == element.defaultValue) {
return false;
}
// End our change

Placeholder plugin update solved my issue :)

you can solve this by binding this to the submit function (either through jQuery validate or manually)
if(element.val() == text){
element.val('');
}