diff --git a/packages/email-field/src/vaadin-email-field.js b/packages/email-field/src/vaadin-email-field.js
index e2d21fe0ca..9b77858051 100644
--- a/packages/email-field/src/vaadin-email-field.js
+++ b/packages/email-field/src/vaadin-email-field.js
@@ -52,6 +52,7 @@ export class EmailField extends TextField {
   constructor() {
     super();
     this._setType('email');
+    this.pattern = '^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9-.]+\\.[a-zA-Z0-9-]{2,}$';
   }
 
   /** @protected */
@@ -62,14 +63,6 @@ export class EmailField extends TextField {
       this.inputElement.autocapitalize = 'off';
     }
   }
-
-  /** @protected */
-  _createConstraintsObserver() {
-    // NOTE: pattern needs to be set before constraints observer is initialized
-    this.pattern = this.pattern || '^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9-.]+\\.[a-zA-Z0-9-]{2,}$';
-
-    super._createConstraintsObserver();
-  }
 }
 
 customElements.define('vaadin-email-field', EmailField);
diff --git a/packages/email-field/test/email-field.test.js b/packages/email-field/test/email-field.test.js
index 78c50ee8b8..97a4f9de2b 100644
--- a/packages/email-field/test/email-field.test.js
+++ b/packages/email-field/test/email-field.test.js
@@ -84,25 +84,44 @@ describe('email-field', () => {
       field.remove();
     });
 
-    it('should not validate by default', async () => {
+    it('should not validate without value', async () => {
       document.body.appendChild(field);
       await nextRender();
       expect(validateSpy.called).to.be.false;
     });
 
-    it('should not validate when the field has an initial value', async () => {
-      field.value = 'foo@example.com';
-      document.body.appendChild(field);
-      await nextRender();
-      expect(validateSpy.called).to.be.false;
-    });
+    describe('with value', () => {
+      beforeEach(() => {
+        field.value = 'foo@example.com';
+      });
 
-    it('should not validate when the field has an initial value and invalid', async () => {
-      field.value = 'foo@example.com';
-      field.invalid = true;
-      document.body.appendChild(field);
-      await nextRender();
-      expect(validateSpy.called).to.be.false;
+      it('should validate by default', async () => {
+        document.body.appendChild(field);
+        await nextRender();
+        expect(validateSpy.calledOnce).to.be.true;
+      });
+
+      it('should validate when using a custom pattern', async () => {
+        field.pattern = '.+@example.com';
+        document.body.appendChild(field);
+        await nextRender();
+        expect(validateSpy.calledOnce).to.be.true;
+      });
+
+      it('should not validate when pattern is unset', async () => {
+        field.pattern = '';
+        document.body.appendChild(field);
+        await nextRender();
+        expect(validateSpy.called).to.be.false;
+      });
+
+      it('should not validate when pattern is unset and the field has invalid', async () => {
+        field.pattern = '';
+        field.invalid = true;
+        document.body.appendChild(field);
+        await nextRender();
+        expect(validateSpy.called).to.be.false;
+      });
     });
   });