emailField

Basics

The emailField component is a specialized input field designed for collecting and validating email addresses. It extends the basic textField component, adding specific functionalities and validations tailored for emails.

An example of emailField:

<emailField errorMessage="Enter a valid email address"
            value="john.doe@email.com"
            clearButtonVisible="true"
            label="Email address"
            width="15em"/>
email field basics

Data Binding

LIVE DEMO

Data binding refers to linking a visual component to a data container. Changes in the visual component or corresponding data container can trigger updates to one another. See Using Data Components for more details.

The following example produces a data-aware emailField.

<data>
    <instance class="com.company.onboarding.entity.Customer" id="customerDc"> (1)
        <fetchPlan extends="_base"/> (2)
        <loader id="customerDl"/>
    </instance>
</data>
<layout>
    <emailField dataContainer="customerDc"
                property="email"
                label="Email"/> (3)
</layout>
1 InstanceContainer for the Customer entity.
2 Inline fetch plan of the entity instance located in the container.
3 Binding the component to a data container and property. The dataContainer attribute contains a link to the customerDc data container, and the property attribute refers to the email entity attribute.

Theme Variants

LIVE DEMO

The themeNames attribute allows you to assign a specific emailField style from the set of predefined variants.

emailField has several theme variants:

  • small

  • align-left

  • align-center

  • align-right

  • helper-above-field

You can find a more detailed description with examples in the corresponding section for the textField component.

Validation

To check values entered into the integerField component, you can use a validator in a nested validators element.

The following predefined validators are available for emailField:

XML Element

validators

Predefined validators

custom - email - notBlank - notEmpty - notNull - regexp - size

See Also

See the Vaadin Docs for more information.