Question

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 text 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?

Answer 1

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.