Remove input text on:focus/ control generated error field

Question

OK, so this is a two part problem

FIDDLE: http://jsfiddle.net/aujqU/575/

Problem 1: I have this form here that will not remove input text when I select the field. I figured it might be the "placeholder" tag. Then I was reading other questions on here that relate to "placeholder" and found it attributes the HTML5 function for that, but obviously that isn't working here. I am using jQuery validate for the form.

Problem 2: When a user does not enter required information jQuery will generate a "label:error" field which can be styled how I want. It does not populate the error field when the form is improperly filled out. It just gives whatever the browsers default is. Any thoughts..?

<div id="form-frame">
     <h3>Schedule a Free Security Review</h3>

    <p>Fill out the form and a Security Specialist will contact you at the phone number below about offers.</p>
    <p>All fields required.</p>
    <form id="contactForm" method="POST" action="">
        <input type="text" id="first_name" name="first_name" minlength="5" maxlength="255" placeholder="First Name" value="" required />
        <input type="text" id="last_name" name="last_name" minlength="2" maxlength="255" placeholder="Last Name" value="" required />
        <input type="hidden" id="state" name="state" value="" />
        <input type="text" id="email" name="email" minlength="25" maxlength="255" placeholder="Email" value="" required />
        <input type="text" id="postal_code" name="postal_code" minlength="5" maxlength="10" placeholder="Zip Code" value="" required />
        <input type="text" id="phone_primary" name="phone_primary" minlength="11" maxlength="12" placeholder="Phone" value="" required />
        <input type="submit" value="Submit" />
    </form>
     <h6>* I agree to receive telemarketing calls at the telephone number provided above.</h6>

    <p>Or Call Us At <span> 888-888-8888</span>

    </p>
</div>

 $('#contactForm').validate({
     onfocusout: function (element) {
         this.element(element);
     },
     rules: {
         first_name: 'required',
         last_name: 'required',
         state: 'required',
         email: 'required',
         postal_code: 'required',
         phone_primary: 'required'
     },
     messages: {
         first_name: 'Please enter your first name',
         last_name: 'Please enter your last name',
         email: 'Please enter your email',
         postal_code: 'Please enter your zip code',
         phone_primary: 'Please enter your phone number'
     }
 });

Answer 1

Ad. Problem 1: As the guys in comments said, it depends on the browser. According to the latest W3C spec draft:

User agents should present this hint to the user [...] e.g. by displaying it inside a blank unfocused control and hiding it otherwise.

Unfortunately, not all browsers follow this recommendation and e.g. latest version of Chrome does not hide the placeholder when a field is focused. Of course, you can handle that using Javascript.

However, please remember that it is kind of an abuse of placeholders, since (again, according to specification) they should be used as hints, not labels.

Ad. Problem 2: This has been answered a few times, e.g. here. Please see an improved version of your code here on jsfiddle:

// Problem no.2 - added http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js to the "External resources" in jsfiddle and it started working as expected
$('#contactForm').validate({
     onfocusout: function (element) {
         this.element(element);
     },
     rules: {
         first_name: 'required',
         last_name: 'required',
         state: 'required',
         email: 'required',
         postal_code: 'required',
         phone_primary: 'required'
     },
     messages: {
         first_name: 'Please enter your first name',
         last_name: 'Please enter your last name',
         email: 'Please enter your email',
         postal_code: 'Please enter your zip code',
         phone_primary: 'Please enter your phone number'
     }
 });

// Problem no. 1
$('input[type=text]').focus(function () {
    this['data-placeholder_old'] = this.placeholder;
    this.placeholder = '';
});

$('input[type=text]').blur(function () {
    this.placeholder = this['data-placeholder_old'] || '';
})

For validation to work I only attached the jquery.validate plugin to the fiddle.