Use Placeholder or not?

This problem relates to IE9 & below

Should I use html5 placeholders or not? We have validation in place and when the zip code reads the placeholder we get an error message, saying it is not a valid zip code. Also in the password field IE9 & below reads as password and creates a user account with that as the password - if the user does not enter one.

Question:
Can I use placeholders without having the issues above and can you show the solution, or should I just go a different route and not use placeholders at all and in that case what is the solution?

Thank you for your help.

That sounds odd. What kind of validation is this?

Its javascript jQuery:
//Bill Zip binding
$(“#billZip”).bind(“focus”,function(){
zipBlur=false;
}).bind(“blur”,function(){
checkAddr(‘bill’);
});

If thats what you mean?

Hm, it might be handy to see full example of this in practice. In my experience, simple JavaScript plays nicely with the placeholder text. It seems odd that jQuery would be treating it as entered content. Anyhow, this might be a question for the JS gurus. But let’s see an example first.

Here are some tips (with templates) on how to post an example, if needed: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics

Should I use html5 placeholders or not?

Only if the placeholder improves the user experience. In the specs it’s described as a hint to the user about the data you want inputted: for example a formatting hint. Your label will tell users what data to input.

I would not use it on type=password inputs. Put your password hint visible and near/next to the input. Or in the label.

We have validation in place and when the zip code reads the placeholder we get an error message, saying it is not a valid zip code. Also in the password field IE9 & below reads as password and creates a user account with that as the password - if the user does not enter one.

Your backend validation should indeed flag placeholder text submitted as data, because it is not valid data. So it is good if your backend validation is catching this. A user account should not be possible to create with a password of your placeholder, but as I said, I would never use placeholder with a password input…

However your frontend should never confuse a user or trick them into sending bad data. Since the entire point of a placeholder is to assist the user, make sure it will always get out of their way as they use the form. You can also use front-end validation to help this: either the new :invalid CSS properties (you can style inputs differently if they have a true invalid property set on them, though this is very basic and “stupid” validation) or the formvalidate stuff or, since you’re using Javascript, have Javascript catch “errors” on blur or something so users are confident they are sending the right information before they hit Submit.

I was forced to write some JS that imitated the HTML5 placeholder more closely than the usual “on focus remove placeholder, on blur if empty add placeholder back in” stuff we’ve been doing with Javascript for years. That is, the HTML5 placeholder now in most user agents (browsers) doesn’t disappear the moment the user focusses on it. Instead it waits for them to have actually added visible characters first. Only when the visible characters are gone does the browser bring the placeholder back, complete usually with browser built-in styles meant to show users that this is placeholder text rather than a default dataset they can send.

Placeholders do have that known usability problem: users see an input filled in and since we know real people often don’t bother reading everything well (they skim through instructions at best, and only look closely when they’re confused), having an input pre-filled means you’ll have people trying to send that (one less input to fill in means people will try it).

Here’s the code I ended up writing, which still seems to fail if I SHIFT-Tab back to the input in question:

HTML, inside a form


<label for="q" class="hidden-offscreen">Type in search terms, product codes or attributes: </label>
<input type="text" id="q" placeholder="Type in search terms, product codes or attributes">

(yeah placeholder repeating label. Actually they only wanted the placeholder. I added the label. The placeholder is being used incorrectly here, but I had no choice in it)

jQueery


$(function() {
    //check if placeholder attribute works;
    //if not, run the fake
    var matchInput = $('#q'),
        test = document.createElement('input');
    if (test.placeholder == undefined) {
        var placeText = matchInput.prev().text();

        function addPlaceholder(matchInput) {
            matchInput.addClass('placeholder'); 
            matchInput.val(placeText);
        }

        function update(matchInput) {
            if (this.value == '') {
                addPlaceholder(matchInput); 
            }
            else {
                matchInput.removeClass('placeholder');
            }
        }

        if (matchInput.val().length == 0) {
            addPlaceholder(matchInput);
        }

        //IE, this won't catch FF<4, le sigh...
        if (!('oninput' in document.body)) {
            document.onpropertychange = function() { 
                if (event.propertyName == 'value') {
                    this.oninput && this.oninput(event);
                }
            }
        }

        matchInput.on('focus', function() {
        //remove placeholder value only when key is pressed
            this.onkeydown = function() {
                if (this.value == placeText) {
                    this.value = '';
                }
            }

            //if this is called
            this.oninput = function() {
                this.onkeyup = null;
                update.call(this, matchInput);
            };

            //fallback for no oninput
            this.onkeyup = function() {
                update.call(this, matchInput);
            };
        });

        matchInput.on('blur', function() {
            var currentVal = this.value;
            this.value = (currentVal=='' || currentVal==placeText) ?
                          placeText : currentVal;
            if (this.value==placeText) {
                matchInput.addClass('placeholder');
            }
            else {
                matchInput.removeClass('placeholder');
            }
        });
    }
});

So, I’m trying to use oninput event here to detect if an actually visible character was entered into the form field, with onpropertychange for IE older than 8? 9? and onkeyup as a fallback for anyone else.

This doesn’t have validation, all it does is add some styles I’ve pre-written
.placeholder {
make text small and greyish and italic…
}

to help the user see that the input only holds placeholder hints rather than something that could be submitted. I would, if I were you, add some JS to hijack the submit() and first check if the value if the input == the placeholder input, and if so, cancel the submit() and show a warning. This will help your backend validation from ever seeing “password” as the password of a user for example (though placeholders are dumb for password inputs. “*********” has it’s own issues. Don’t use placeholders on type=password inputs).