Testing - Email

Pristine

<hx-email-control>

<input type="email">

: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="email" 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-email-control hx-dirty>

<input type="email">

: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="email" 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-email-control class="hxInvalid">

<input type="email">

: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="email" 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="email" placeholder="Please Enter Email" />

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 + div

Label

DIV