input:invalid css rule is applied on page load

Here’s what you’re looking for: http://jsfiddle.net/CaseyRule/16fuhf6r/2/

Style it like this:

form.submitted input:invalid{
    border-color:orange
}

And then add this JavaScript (I’m using jQuery here):

$('input[type="submit"]').click( function(){
    $('form').addClass('submitted');
});

I don’t believe there is a way to achieve this yet without JavaScript.