javascript - How can I make a textfield highlight in red only after its input is proven as incorrect? -

i have form (horribly basic , messy @ moment, know.):

this how looks on-load.

here css:

img {     position: fixed;     right: 100px;     top: 100px; }  input:invalid {     background-color : #ff0000; }  input:valid {     background-color : #99ff99; } 

what want know how can fields displayed red if , when user bought page incorrect inputs?

here's jsfiddle relevant html, css, , js.

when clicking on submit button, check fields before let user continue, , if incorrect, return false; submit button won't refresh page.

then use yourelement.style.backgroundcolor = "red"; on wrong elements.