input @pattern

dabblet.css

/**
 * input @pattern
 */

input:invalid { background: #FCC }
input:valid   { background: #CFC }

dt { margin: 2em 0 0.5em }

dabblet.html

<dl>
	<dt>@required</dt>
	<dd><input required="required"/></dd>

	<dt>@pattern="KG.*"</dt>
	<dd><input required="required" pattern="KG.*"/></dd>

	<dt>@pattern="KG\d{3}[AJM]"</dt>
	<dd><input required="required" pattern="KG\d{3}[AJM]"/></dd>
	
	<dt>KG ouside, input case-insensitive</dt>
	<dd>KG<input required="required" pattern="\d{3}[AJMajm]"/></dd>
</dl>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}