<main>
<section aria-labelledby="valid-demo">
<h2 id="valid-demo">
<code>input:valid</code> Pattern Demo
</h2>
<form id="form-demo">
<div class="field">
<label for="form-name">
Zip Code
<span class="required" aria-hidden="true">*</span>
</label>
<input type="text" name="zip-code" id="form-zip-code" value="12345" pattern="[0-9]{5}" required />
</div>
<div class="actions">
<input type="submit" value="submit" id="form-submit" />
</div>
</form>
</section>
</main>
input:valid {
outline: 3px dashed green;
}
This Pen doesn't use any external JavaScript resources.