EmailField
fw-email
A styled email address input with real-time format validation and visual feedback. Integrates with the form widget styling system including the icon, focus ring, and error state.
Usage
HTML (Auto-init)
HTML
<input type="text" class="fw-email" id="email">
<script>
FormWidgets.autoInit();
</script>JavaScript Initialization
JavaScript
// Basic
FormWidgets.init('#email', 'EmailField');
// Required
FormWidgets.init('#email', 'EmailField', {
required: true
});Options
| Option | Type | Default | Description |
|---|---|---|---|
| icon | string | 'email' | Name of the SVG icon to use from the internal icon set. |
| required | boolean | false | When true, the field is required and an empty value shows a validation error. Invalid email formats also trigger an error. |
Data Attributes
| Data Attribute | Equivalent Option | Example |
|---|---|---|
| data-icon | icon | data-icon="email" |
| data-required | required | data-required="true" |
Validation
EmailField validates on blur (when the user leaves the field). An error message is shown if:
- The field is
requiredand empty - The entered value does not match a valid email format (e.g. missing
@or domain)
Validation on demand
You can trigger validation programmatically: FormWidgets.instances.get(el).validate() — returns true if valid.
Features
Real-time Validation
Validates email format on blur with an inline error message.
Styled Icon
Envelope icon highlights in orange on focus.
Clear Button
One-click clear button appears when the field has a value.
Consistent Styling
Matches all other FormWidget fields for a unified UI.