Email Field

<ef-panel spacing>
  <p>Email</p>
  <ef-email-field placeholder="Business email address" icon="email"></ef-email-field>
</ef-panel>

ef-panel {
  max-width: 450px;
}

ef-email-field {
  width: 250px;
}

p {
  margin-bottom: 4px;
}

ef-email-field is a form control to confidently obtain an email input from users.

Basic usage

ef-email-field has similar behaviors to the native email input type.

<ef-email-field placeholder="Business email address"></ef-email-field>

Getting value

The field's value can be accessed directly using the value property.

<ef-email-field
  id="email-input"
  value="awesome@tmail.com"
></ef-email-field>

var emailInput = document.getElementById("email-input");
emailInput.value; // "awesome@tmail.com"

You can also listen for the value-changed event that triggers when the value changes due to user interactions.

<ef-email-field id="input" placeholder="Type an email ..."></ef-email-field>
<p>Value: <code id="value-text"></code></p>

var element = document.getElementById("input");
var valueChangedText = document.getElementById('value-text');

element.addEventListener("value-changed", function(e) {
  valueChangedText.innerHTML = e.detail.value;
});

<ef-email-field id="input"></ef-email-field>
<p>Value: <code id="value-text"></code></p>

var element = document.getElementById("input");
var valueChangedText = document.getElementById("value-text");

element.addEventListener("value-changed", function (e) {
  valueChangedText.innerHTML = e.detail.value;
});

Input validation

Validation occurs when the constraints are provided and the value changes. If the error state changes, it will dispatch the error-changed event along with the current error state.

Alternatively, you can check the error property to confirm if the input is valid.

Input length

The maxlength attribute limits the number of characters that users can type into the input and the minlength attribute is used to set the minimum of characters required. ef-email-field will show error styles if the condition is not met.

<ef-email-field id="email-input" minlength="8" maxlength="14" placeholder="Length between 8 to 14 characters"></ef-email-field>
<p id="error-text"></p>

var element = document.getElementById("email-input");
var errorChangedText = document.getElementById('error-text');
element.addEventListener("error-changed", function(e) {
  if (e.detail.value) {
    errorChangedText.innerHTML = "Must be in standard email format with between 8-14 characters.";
  } else {
    errorChangedText.innerHTML = "";
  }
});

#error-text {
  color: #d94255;
}

ef-email-field {
  width: 275px;
}

<ef-email-field
  id="email-input"
  minlength="8"
  maxlength="14"
></ef-email-field>
<p id="error-text"></p>

var element = document.getElementById("email-input");
var errorChangedText = document.getElementById("error-text");
element.addEventListener("error-changed", function (e) {
  if (e.detail.value) {
    errorChangedText.innerHTML =
      "Must be in standard email format with between 8-14 characters.";
  } else {
    errorChangedText.innerHTML = "";
  }
});

Pattern

You can use a regular expression to validate the input value by adding the pattern attribute.

<ef-email-field id="email" pattern=".+@mail.com" placeholder="Type email ending with &apos;@mail.com&apos;"></ef-email-field>
<p id="error-text"></p>

var element = document.getElementById("email");
var errorChangedText = document.getElementById("error-text");
element.addEventListener("error-changed", function(e) {
  if (e.detail.value) {
    errorChangedText.innerHTML = "Email must end with '@mail.com'.";
  } else {
    errorChangedText.innerHTML = "";
  }
});

#error-text {
  color: #d94255;
}

ef-email-field {
  width: 275px;
}

<ef-email-field id="email" pattern=".+@mail.com"></ef-email-field>
<p id="error-text"></p>

var element = document.getElementById("email");
var errorChangedText = document.getElementById("error-text");
element.addEventListener("error-changed", function (e) {
  if (e.detail.value) {
    errorChangedText.innerHTML = "Email must end with '@mail.com'.";
  } else {
    errorChangedText.innerHTML = "";
  }
});

Icon

An inline icon can be displayed inside the input using icon.

<ef-email-field icon="individual" placeholder="Add your personal email .."></ef-email-field>

ef-email-field {
  width: 275px;
}

<ef-email-field icon="individual"></ef-email-field>

An icon can become actionable by adding the icon-has-action attribute to the element, and ef-email-field will fire the icon-click event when a user clicks on the icon. You can add an event listener to this event to execute your code.

<ef-email-field id="email-list-input" placeholder="Type email and then click the icon ..." icon="msgr-adduser" icon-has-action pattern="^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$"></ef-email-field>
<p id="error-text"></p>
<p id="email-added"></p>

var element = document.getElementById('email-list-input');
var emailList = document.getElementById('email-added');
var errorChangedText = document.getElementById("error-text");

element.addEventListener('icon-click', function(e) {
  if (!element.error && element.value.length > 0) {
    emailList.innerHTML = element.value + " is added.";
  }
});
element.addEventListener("error-changed", function(e) {
  if (e.detail.value) {
    errorChangedText.innerHTML = "Invalid email format.";
    emailList.innerHTML = "";
  } else {
    errorChangedText.innerHTML = "";
  }
});

#error-text {
  color: #d94255;
}

ef-email-field {
  width: 275px;
}

<ef-email-field
  id="email-list-input"
  icon="msgr-adduser"
  pattern="^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$"
  icon-has-action
></ef-email-field>
<p id="email-added"></p>

var element = document.getElementById("email-list-input");
var emailList = document.getElementById("email-added");

element.addEventListener("icon-click", function (e) {
    if (!element.error && element.value.length > 0) {
      emailList.innerHTML = element.value + " is added.";
    }
});