/* this code requires modernizer to work the best.

call the setInputHint for each field

if (!Modernizr.input.placeholder){
      setInputHint($('#name'));
}

<input type="text" name="name" id="name" class="required" placeholder="Name *" />

The js code grabs the placeholder attribute, and works with that.

Example validation code: 

This uses the placeholder attribute, and ensures that the value entered is not equal to that of the placeholder.

  $('#the-form').submit(function() {
    var errors = false;
    var errorMsg = "";
    $('.required').each(function() {
      if(!isValid($(this).val()) || ($(this).attr('placeholder') && $(this).attr('placeholder') == $(this).val())) {
        errorMsg += $(this).attr('name') + " cannot be blank\n";
        errors = true;
      }
    });
    if(errors) {
      alert(errorMsg);
      return false;
    }
  
    
  });

*/

$(document).ready(function() {  
	if ($.browser.msie){		
		$(":text").each(function() {
			$(this).val($(this).attr('placeholder'));
		});       
		$(":text").focus(function(){
		val = $(this).val();
		if($(this).val() == $(this).attr('placeholder'))
			{$(this).val(""); }
		});  
		$(":text").blur(function(){    
			if($.trim($(this).val()) == ""){$(this).val($(this).attr('placeholder'));  }
		});
	}
});      
          
function isValid(value, ele) {
  var invalid_against_placeholder = false;
  if(ele != null) {
    invalid_against_placeholder = equal_to_placeholder(ele);
  }
  if(value == '' || value == null || invalid_against_placeholder) {
    return false;
  }
  else {
    return true;
  }
}

function equal_to_placeholder(ele) {
  return (ele.attr('placeholder') && ele.attr('placeholder') == ele.val());
}

function setInputHint(ele) {
  var text = ele.attr('placeholder');
  ele.attr('value', text);
  ele.click(function() {
    if(ele.attr('value') == text) {
      ele.attr('value', '');
    }
  });
  ele.focusout(function() {
    if(ele.attr('value') == '') {
      ele.attr('value', text)
    }
  });
}

/*
* used for when field labels are placeholder only
* @param field : jQuery result of the field
*/
function setFocusHint(field) {
  field.focusin(function() {
    $('#hint_' + $(this).attr('id')).remove();
    var text = $(this).attr('placeholder');
    $(this).after('<span class="hint" id="hint_'+ $(this).attr('id') +'">'+ text +'</span>');
  }).focusout(function() {
    $('#hint_' + $(this).attr('id')).remove();
  });
}