Placeholders shouldn't be used for labels

I was recently working on a site with a few forms. The designers decided to put the labels in the input boxes, as it would look better on the page (this should have been a warning sign). I was working mostly on the back end for this project, so I wrote up the server code to validate the form and save it to the database.

The trouble started when I started doing the client side validation. I had discovered Parsely.js and thought it would be simple to just drop this in. Everything was working until testing with IE 7 & 8 started. Because the front end designer was using the placeholder attribute, the labels wouldn't be showing up the fields for these old browsers.

To fix this, I added a Placeholder JS library. However, because this added the placeholder values as the input values for the form, Parsely wouldn't work correctly. After some time browsing Parsely's documentation, I decided to add another validator to Parsely's extend file that would check to see if the field's value isn't the placeholder value.

defaultvalue: function (val, defVal) { return val !== defVal; }

However, there's still a small issue of the placeholder text not displaying once the form has been validated and failed in IE 7 & 8. The option we found best for this was to re-initialize the Placeholder code once the form was validated.

onFormSubmit: function (isFormValid, event, ParsleyForm) { $.Placeholder.init(); }

The best idea would have been to move the labels out of the input field and instead use the placeholders as examples. However, if you have a designer that wants to use placeholders instead and you want to use Parsely.js, this code might help you out.

P.S. Just noticed that the tags field is done with placeholder text for the label :P