HTML5, how to force input pattern validation on value change?

Question

I am trying to learn HTML5 and came across the following. I would like to use the pattern input keyword to validate the input as the user types it (e.g. validation after pressing tab or changing focus from input box).

I have tried the following:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" onchange="this.variable.validate()" />  </li>

And as well:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" />  </li>

I made up the code for

onchange="this.variable.validate()" 

How to trigger the validation on value change? I am able to do this only onSubmit.

Answer 1

_{Disclaimer:
All I am about to say here works for all modern browsers. The term "modern browser" in this context excludes IE9 and earlier. Also Safari for Windows has only partial support.}

If all you need is a styling indicator, you can use pure CSS for this:

input[pattern]:invalid{
  color:red;
}

When using pattern, the onsubmit validation is automatically done by the browser (does not work in Safari for Windows).

Answer 2

<input type="text" name="country" pattern="[A-z]{3}" oninput="this.reportValidity()" />

Check the oninput bit.

You might want to check older browsers though, something like:

<input type="text" name="country" pattern="[A-z]{3}"
    oninput="if (typeof this.reportValidity === 'function') {this.reportValidity();}"/>