jQuery Validate with fixed header

I am using the jQuery validate plugin and I have a fixed header.

When ever I press the submit button and a required field is missing, the plugin jumps directly to the field and shows that it is required. However, since I have a fixed header, the plugin jumps to the field and one can't see it because it is under the fixed header. How can I fix this?

Here is a minimal sample code and teh associated jFiddle

$("#awesome").validate({
    rules: {
        name: "required"
    }
});

form {
    margin-top: 50px;
}

.top-menu {
    height: 50px;
    background-color: rgba(23,123,23,0.3);
    font-size: 16px;
    color: #FFF;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
}

<div class='top-menu'>Fixed Menu</div>
<form id='awesome' method='POST' >
    <input type='text' id='name' name='name'>
    <div style='height:3000px;background-color:red;'></div>
    <input type='submit'>
</form>

Edit: I am looking for a solution that is similar to offsetting an html anchor to adjust for fixed header. I am a bit puzzled, because I dont really know how the plugin scrolls to the 'required' field. I did not find something like method 'scrollTo' within the plugin. If I would find the according code section, one could maybe simple change the offset where it scrolls to?