Question

I’m using jquery validation on a form with a text area. The html in the form looks like this (other fields that validate fine not included):

<form id="contact" name="contact" action="/forms/contact_received.php" method="get">
    <textarea name="message" cols="60" rows="10" value=""></textarea>
</form> 

jquery script looks like this:

$("#contact").validate({    
    rules: { 
        name: "required",
        email: {required: true, email: true},
        subject: "required",
        message: {required: true}
    },
    messages: { 
        name: "Enter your name", 
        email: {required: "Please enter a valid email address",minlength: "Please enter a valid email address"},
        subject: "it's required",
        message: "Please enter your message in the box above"
    }
});

In Chrome, when the user tries to submit while this textarea is empty, my error message appears.

Then when user enters text in textarea, he’s allowed to write one character (which appears as red “error” text, then changes to black after 1st character) then the error message disappears, focus on the textarea is lost and the textarea goes back to it’s initial width. User then has to click on the form again to enter the rest of the comment.

How can I make it so that focus on the textarea is maintained after validation returns “true”?

Answer 1

I figured this out. The problem was that I’d set .error{display:block} in the sitewide css. Maybe I should delete this but a couple people had the same problem in the jquery forums as seen here so it’s a legit problem:

http://forum.jquery.com/topic/jquery-validate-in-chrome-field-loses-focus-on-unhighlight