Submitting form with placeholders, color not firing from first click jQuery

So I have a form that's giving me two issues.

1. When I click the submit button once, the validation message is triggered (good), but the text color of the place holder does not change as it should, if I click it twice, it changes perfectly. I need to have it change on the first time, as long as there is an error, it should change.

2. Say you put any value for name, for example, the letter e, then hit submit twice, the placeholder tex开发者_JAVA技巧t goes over what was typed. I need to have no placeholder show up over the text, since there is a value there.

Here is the fiddle I have http://jsfiddle.net/Lqb6q/

Any idea how to fix this?

---

The problem is that you are listening for a click event, instead you should be listening for a submit event.

Change this:

$('#submit-ticket').click(function() {
if($('input').hasClass('error')) {
$("label.overlabel-apply").css('cssText', 'color: red !important');
}
});

to this:

$('#ticket-form').submit(function() {
    if($('input').hasClass('error')) {
        $("label.overlabel-apply").css('cssText', 'color: red !important');
    }
    $('input').each(function(){
        if($(this).val().length){
            hideLabel($(this).attr('id'), true);
        }
    });
});

See it in action.

---

The problem with this might be that there are two 'label' elements associated with each 'input'. Although official HTML spec allows this, there are several problem with user agent displaying this. Have a look here.

Try replacing one of labels with span, or div.