When should an input validation border change?

When I was working on validation just now, I came up with a couple of questions with regard to validation. When should an input border's color change?

  • When should it turn from (a default or) no color to e.g. a green-colored border?
  • when should it turn from (a default or) no color to e.g. a red-colored border?
  • When should it turn from e.g. a red-colored border to e.g. a green-colored border?

Most of the time I see that either the input's border color changes on the submition of the form or when the input's value changes (see below as an example).

Example

Isn't changing the color on the submition too late?

Isn't changing the color on input's value change too broad? (What about if I fill in a number inside a text input field, the border will change from red to green whilst the value inside related input is actually, in fact, invalid?)

Is there any best practice or are there any guidelines for the handling of input validation when it comes to user experience?