:invalid лишь после попытки отправить форму?

Недавно узнал о такой крутом псевдо классе для input как :invalid. И если к примеру поля required или тип не совпадает он может окрасить их в другой цвет( к примеру красный как у меня)

Проблема лишь в том что если я задаю input:invalid{border: 1px solid red;} , он изначально имеет красный цвет. ДА это логично ведь он required и поля пока не заполнены. Но возможно ли сделать так что бы лишь при попытке отправить ( неудачной) загоралось эта функция. Я думаю отловить события и при неудачной попытке лишь добавить класс. Но может есть более легкий способ Вопрос задан только что