Testing - Text Input

Pristine

<hx-text-control>

<input type="text">

:valid	:invalid
Pristine, Optional, Enabled, Valid (blur) Pristine, Optional, Enabled, Valid (focus)	Pristine, Optional, Enabled, Invalid (blur) Pristine, Optional, Enabled, Invalid (focus)
Pristine, Optional, Disabled, Valid (blur) Pristine, Optional, Disabled, Valid (focus)	Pristine, Optional, Disabled, Invalid (blur) Pristine, Optional, Disabled, Invalid (focus)

<input type="text" required>

:valid	:invalid
Pristine, Required, Enabled, Valid (blur) Pristine, Required, Enabled, Valid (focus)	Pristine, Required, Enabled, Invalid (blur) Pristine, Required, Enabled, Invalid (focus)
Pristine, Required, Disabled, Valid (blur) Pristine, Required, Disabled, Valid (focus)	Pristine, Required, Disabled, Invalid (blur) Pristine, Required, Disabled, Invalid (focus)

<hx-text-control hx-dirty>

<input type="text">

:valid	:invalid
Dirty, Optional, Enabled, Valid (blur) Dirty, Optional, Enabled, Valid (focus)	Dirty, Optional, Enabled, Invalid (blur) Dirty, Optional, Enabled, Invalid (focus)
Dirty, Optional, Disabled, Valid (blur) Dirty, Optional, Disabled, Valid (focus)	Dirty, Optional, Disabled, Invalid (blur) Dirty, Optional, Disabled, Invalid (focus)

<input type="text" required>

:valid	:invalid
Dirty, Required, Enabled, Valid (blur) Dirty, Required, Enabled, Valid (focus)	Dirty, Required, Enabled, Invalid (blur) Dirty, Required, Enabled, Invalid (focus)
Dirty, Required, Disabled, Valid (blur) Dirty, Required, Disabled, Valid (focus)	Dirty, Required, Disabled, Invalid (blur) Dirty, Required, Disabled, Invalid (focus)

<hx-text-control class="hxInvalid">

<input type="text">

:valid	:invalid
.hxInvalid, Optional, Enabled, Valid (blur) .hxInvalid, Optional, Enabled, Valid (focus)	.hxInvalid, Optional, Enabled, Invalid (blur) .hxInvalid, Optional, Enabled, Invalid (focus)
.hxInvalid, Optional, Disabled, Valid (blur) .hxInvalid, Optional, Disabled, Valid (focus)	.hxInvalid, Optional, Disabled, Invalid (blur) .hxInvalid, Optional, Disabled, Invalid (focus)

<input type="text" required>

:valid	:invalid
.hxInvalid, Required, Enabled, Valid (blur) .hxInvalid, Required, Enabled, Valid (focus)	.hxInvalid, Required, Enabled, Invalid (blur) .hxInvalid, Required, Enabled, Invalid (focus)
.hxInvalid, Required, Disabled, Valid (blur) .hxInvalid, Required, Disabled, Valid (focus)	.hxInvalid, Required, Disabled, Invalid (blur) .hxInvalid, Required, Disabled, Invalid (focus)

<input type="text" placeholder="Type something..." />

Valid w/ Placeholder

Invalid w/ Placeholder

Disabled w/ Placeholder

Extra elements should not be visible.

input + label

Label

input + label.hxRequired

Label

input + label.hxOptional

Label

input + label.hxRequired.hxOptional

Label

input + label + .hxPrefix

Label pfx

input + label + .hxSuffix

Label sfx

input + label + .hxPrefix + .hxSuffix

Label pfx sfx

input + label + div

Label

DIV