Unfortunately, you can't style pseudo classes in JavaScript, since they're not real elements, they don't exist in the actual DOM.
With vanilla JavaScript you'd use the validation API.
In jQuery you can simply do this, http:
if ( $input.is(':invalid') ) { ... }
Or alternatively, can I override the validation method used?
If you're using HTML5 validation, then stick to the markup. Otherwise, you can disable HTML5 validation with $form.attr('novalidate', 'novalidate') and use JS to validate your fields, and then adding valid or invalid classes where needed. I made a plugin that works like this to support non HTML5 browsers.