diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx
index b1a2fa6b5bff..cbea94de23ec 100644
--- a/packages/main/cypress/specs/ComboBox.cy.tsx
+++ b/packages/main/cypress/specs/ComboBox.cy.tsx
@@ -91,7 +91,7 @@ describe("General Interaction", () => {
 
 		cy.get("@combobox").should("have.prop", "value", "One");
 		cy.get("[ui5-cb-item]").first().should("have.prop", "selected", true);
-		
+
 		cy.window().then(window => {
 			return window.getSelection()?.toString();
 		}).should("contains", "ne");
@@ -921,7 +921,7 @@ describe("Accessibility", () => {
 		// open the popover
 		cy.get("@combo").shadow().find("input").realPress("F4");
 		cy.get("@combo").shadow().find("input").realPress("ArrowDown");
-		
+
 		cy.get("@invisibleMessageSpan").should("have.text", "List item 2 of 6");
 	});
 
@@ -1257,14 +1257,14 @@ describe("Additional Navigation", () => {
 			const scrollableRect = picker[0].shadowRoot.querySelector(".ui5-popup-content").getBoundingClientRect();
 			const lastItem = document.querySelector("#combo-grouping ui5-cb-item-group:last-child ui5-cb-item:last-child");
 			const elementRect = lastItem!.getBoundingClientRect();
-			
+
 			const isInVisibleArea = !(
 				elementRect.bottom < scrollableRect.top ||
 				elementRect.top > scrollableRect.bottom ||
 				elementRect.right < scrollableRect.left ||
 				elementRect.left > scrollableRect.right
 			);
-			
+
 			expect(isInVisibleArea).to.be.true;
 		});
 
@@ -1279,14 +1279,14 @@ describe("Additional Navigation", () => {
 			const scrollableRect = picker[0].shadowRoot.querySelector(".ui5-popup-content").getBoundingClientRect();
 			const firstItem = document.querySelector("#combo-grouping ui5-cb-item-group:first-child ui5-cb-item:first-child");
 			const elementRect = firstItem!.getBoundingClientRect();
-			
+
 			const isInVisibleArea = !(
 				elementRect.bottom < scrollableRect.top ||
 				elementRect.top > scrollableRect.bottom ||
 				elementRect.right < scrollableRect.left ||
 				elementRect.left > scrollableRect.right
 			);
-			
+
 			expect(isInVisibleArea).to.be.true;
 		});
 	});
@@ -1398,7 +1398,7 @@ describe("Keyboard interaction", () => {
 
 		cy.get("#combo-grouping").shadow().find("input").realClick();
 		cy.get("#combo-grouping").should("be.focused");
-		
+
 		cy.get("#combo-grouping").shadow().find("input").realClick();
 		cy.get("#combo-grouping").should("be.focused");
 
@@ -1922,7 +1922,7 @@ describe("Event firing", () => {
 
 		// Focus out to trigger change event
 		cy.get("body").realClick();
-		
+
 		cy.get("@changeSpy").should('have.been.calledOnce');
 		cy.get("@changeSpy").should('have.been.calledWithMatch', Cypress.sinon.match(event => {
 			return event.target.value === "Algeria";
@@ -1997,7 +1997,7 @@ describe("Event firing", () => {
 
 		// Verify change event was fired
 		cy.get("@changeSpy").should('have.callCount', 1);
-		
+
 		// Verify the event contains correct data
 		cy.get("@changeSpy").should('have.been.calledWithMatch', Cypress.sinon.match(event => {
 			return event.target.value === "Bahrain";
@@ -2106,11 +2106,11 @@ describe("Event firing", () => {
 
 		cy.get("@combo").shadow().find("[ui5-icon]").realClick();
 		cy.get("@combo").shadow().find("[inner-input]").realPress("ArrowDown");
-		
+
 		cy.get("@changeSpy").should('have.callCount', 0);
-		
+
 		cy.get("@combo").find("[ui5-cb-item]").first().realClick();
-		
+
 		cy.get("@changeSpy").should('have.been.calledOnce');
 		cy.get("@changeSpy").should('have.been.calledWithMatch', Cypress.sinon.match(event => {
 			return event.target.value === "Algeria";
@@ -2131,7 +2131,7 @@ describe("Event firing", () => {
 
 		cy.get("#change-cb").shadow().find("[inner-input]").realClick();
 		cy.get("#change-cb").shadow().find("[inner-input]").realPress("ArrowDown");
-		
+
 		cy.get("@changeSpy").should('have.callCount', 0);
 
 		cy.get("#change-cb").shadow().find("[inner-input]").realPress("ArrowDown");
@@ -2185,7 +2185,7 @@ describe("Event firing", () => {
 
 		cy.get("#input-cb").shadow().find("[inner-input]").realClick();
 		cy.get("#input-cb").shadow().find("[inner-input]").realPress("ArrowDown");
-		
+
 		cy.get("@inputSpy").should('have.been.calledOnce');
 		cy.get("@inputSpy").should('have.been.calledWithMatch', Cypress.sinon.match(event => {
 			return event.target.value === "Argentina";
@@ -2597,7 +2597,7 @@ describe("Event firing", () => {
 
 		cy.get("@combo").should("have.prop", "_effectiveShowClearIcon", true);
 		cy.get("@combo").shadow().find(".ui5-input-clear-icon-wrapper").realClick();
-		cy.get("@inputSpy").should('have.been.calledTwice');		
+		cy.get("@inputSpy").should('have.been.calledTwice');
 	});
 
 	it("should show all items if value does not match any item and arrow is pressed", () => {
@@ -2843,7 +2843,7 @@ describe("ComboBox Composition", () => {
 		cy.get("@combobox").should("have.prop", "_isComposing", true);
 
 		cy.get("@nativeInput").trigger("compositionend", { data: "사랑" });
-		
+
 		cy.get("@nativeInput")
 			.invoke("val", "사랑")
 			.trigger("input", { inputType: "insertCompositionText" });
@@ -2897,7 +2897,7 @@ describe("ComboBox Composition", () => {
 		cy.get("@combobox").should("have.prop", "_isComposing", true);
 
 		cy.get("@nativeInput").trigger("compositionend", { data: "ありがとう" });
-		
+
 		cy.get("@nativeInput")
 			.invoke("val", "ありがとう")
 			.trigger("input", { inputType: "insertCompositionText" });
@@ -2951,7 +2951,7 @@ describe("ComboBox Composition", () => {
 		cy.get("@combobox").should("have.prop", "_isComposing", true);
 
 		cy.get("@nativeInput").trigger("compositionend", { data: "谢谢" });
-		
+
 		cy.get("@nativeInput")
 			.invoke("val", "谢谢")
 			.trigger("input", { inputType: "insertCompositionText" });
@@ -2973,3 +2973,57 @@ describe("ComboBox Composition", () => {
 			.should("have.attr", "value", "谢谢");
 	});
 });
+
+describe("Validation inside a form", () => {
+	it("has correct validity for valueMissing", () => {
+		cy.mount(
+			<form>
+				<ComboBox id="cmbForm" required></ComboBox>
+				<button type="submit" id="submitBtn">Submit</button>
+			</form>
+		);
+
+		cy.get("form").then($form => {
+			$form.get(0).addEventListener("submit", (e) => e.preventDefault());
+			$form.get(0).addEventListener("submit", cy.stub().as("submit"));
+		});
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("[ui5-combobox]")
+			.as("combo")
+			.ui5AssertValidityState({
+				formValidity: { valueMissing: true },
+				validity: { valueMissing: true, valid: false },
+				checkValidity: false,
+				reportValidity: false
+			});
+
+		cy.get("#cmbForm:invalid")
+			.should("exist");
+
+		cy.get("@combo")
+			.realType("Albania");
+
+		cy.get("@combo")
+			.ui5AssertValidityState({
+				formValidity: { valueMissing: false },
+				validity: { valueMissing: false, valid: true },
+				checkValidity: true,
+				reportValidity: true
+			});
+
+		cy.get("#cmbForm:invalid")
+			.should("not.exist");
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.calledOnce");
+	});
+});
diff --git a/packages/main/cypress/specs/Input.cy.tsx b/packages/main/cypress/specs/Input.cy.tsx
index d35260bbdf6e..6f5a161aef82 100644
--- a/packages/main/cypress/specs/Input.cy.tsx
+++ b/packages/main/cypress/specs/Input.cy.tsx
@@ -2913,3 +2913,184 @@ describe("Input Composition", () => {
 			.should("have.attr", "value", "谢谢");
 	});
 });
+
+describe("Validation inside a form", () => {
+	it("has correct validity for valueMissing", () => {
+		cy.mount(
+			<form>
+				<Input id="inpForm" required></Input>
+				<button type="submit" id="submitBtn">Submit</button>
+			</form>
+		);
+
+		cy.get("form").then($form => {
+			$form.get(0).addEventListener("submit", (e) => e.preventDefault());
+			$form.get(0).addEventListener("submit", cy.stub().as("submit"));
+		});
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("[ui5-input]")
+			.as("input")
+			.ui5AssertValidityState({
+				formValidity: { valueMissing: true },
+				validity: { valueMissing: true, valid: false },
+				checkValidity: false,
+				reportValidity: false
+			});
+
+		cy.get("#inpForm:invalid")
+			.should("exist");
+
+		cy.get("@input")
+			.realType("Albania");
+
+		cy.get("@input")
+			.ui5AssertValidityState({
+				formValidity: { valueMissing: false },
+				validity: { valueMissing: false, valid: true },
+				checkValidity: true,
+				reportValidity: true
+			});
+
+		cy.get("#inpForm:invalid")
+			.should("not.exist");
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.calledOnce");
+	});
+
+	it("has correct validity for typeMismatch- Email", () => {
+		cy.mount(
+			<form>
+				<Input id="inpForm" required type="Email"></Input>
+				<button type="submit" id="submitBtn">Submit</button>
+			</form>
+		);
+
+		cy.get("form").then($form => {
+			$form.get(0).addEventListener("submit", (e) => e.preventDefault());
+			$form.get(0).addEventListener("submit", cy.stub().as("submit"));
+		});
+
+		cy.get("[ui5-input]")
+			.as("input")
+			.realClick()
+			.realType("email");
+
+		cy.get("@input")
+			.should("have.value", "email");
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("@input")
+			.ui5AssertValidityState({
+				formValidity: { typeMismatch: true },
+				validity: { typeMismatch: true, valid: false },
+				checkValidity: false,
+				reportValidity: false
+			});
+
+		cy.get("#inpForm:invalid")
+			.should("exist");
+
+		cy.get("@input")
+			.shadow()
+			.find("input")
+			.clear();
+
+		cy.get("@input")
+			.realType("email@gmail.com");
+
+		cy.get("@input")
+			.ui5AssertValidityState({
+				formValidity: { patternMismatch: false },
+				validity: { patternMismatch: false, valid: true },
+				checkValidity: true,
+				reportValidity: true
+			});
+
+		cy.get("#inpForm:invalid")
+			.should("not.exist");
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.calledOnce");
+	});
+		it("has correct validity for typeMismatch- URL", () => {
+		cy.mount(
+			<form>
+				<Input id="inpForm" required type="URL"></Input>
+				<button type="submit" id="submitBtn">Submit</button>
+			</form>
+		);
+
+		cy.get("form").then($form => {
+			$form.get(0).addEventListener("submit", (e) => e.preventDefault());
+			$form.get(0).addEventListener("submit", cy.stub().as("submit"));
+		});
+
+		cy.get("[ui5-input]")
+			.as("input")
+			.realClick()
+			.realType("google");
+
+		cy.get("@input")
+			.should("have.value", "google");
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("@input")
+			.ui5AssertValidityState({
+				formValidity: { typeMismatch: true },
+				validity: { typeMismatch: true, valid: false },
+				checkValidity: false,
+				reportValidity: false
+			});
+
+		cy.get("#inpForm:invalid")
+			.should("exist");
+
+		cy.get("@input")
+			.shadow()
+			.find("input")
+			.clear();
+
+		cy.get("@input")
+			.realType("https://www.google.com");
+
+		cy.get("@input")
+			.ui5AssertValidityState({
+				formValidity: { typeMismatch: false },
+				validity: { typeMismatch: false, valid: true },
+				checkValidity: true,
+				reportValidity: true
+			});
+
+		cy.get("#inpForm:invalid")
+			.should("not.exist");
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.calledOnce");
+	});
+});
diff --git a/packages/main/cypress/specs/MultiComboBox.cy.tsx b/packages/main/cypress/specs/MultiComboBox.cy.tsx
index 4e51fb2029e5..7a712c662fc8 100644
--- a/packages/main/cypress/specs/MultiComboBox.cy.tsx
+++ b/packages/main/cypress/specs/MultiComboBox.cy.tsx
@@ -4392,3 +4392,61 @@ describe("MultiComboBox Composition", () => {
 			.should("have.length", 0);
 	});
 });
+
+describe("Validation inside a form", () => {
+	it("has correct validity for valueMissing", () => {
+		cy.mount(
+			<form>
+				<MultiComboBox id="mcbInAForm" no-validation required>
+					<MultiComboBoxItem text="Albania"></MultiComboBoxItem>
+					<MultiComboBoxItem text="Denmark"></MultiComboBoxItem>
+					<MultiComboBoxItem text="England"></MultiComboBoxItem>
+				</MultiComboBox>
+				<button type="submit" id="submitBtn">Submit</button>
+			</form>
+		);
+
+		cy.get("form").then($form => {
+			$form.get(0).addEventListener("submit", (e) => e.preventDefault());
+			$form.get(0).addEventListener("submit", cy.stub().as("submit"));
+		});
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("[ui5-multi-combobox]")
+			.as("mcb")
+			.ui5AssertValidityState({
+				formValidity: { valueMissing: true },
+				validity: { valueMissing: true, valid: false },
+				checkValidity: false,
+				reportValidity: false
+			});
+
+		cy.get("#mcbInAForm:invalid")
+			.should("exist");
+
+		cy.get("@mcb")
+			.realType("Albania");
+
+		cy.get("@mcb")
+			.ui5AssertValidityState({
+				formValidity: { valueMissing: false },
+				validity: { valueMissing: false, valid: true },
+				checkValidity: true,
+				reportValidity: true
+			});
+
+		cy.get("#mcbInAForm:invalid")
+			.should("not.exist");
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.calledOnce");
+	});
+});
diff --git a/packages/main/cypress/specs/TextArea.cy.tsx b/packages/main/cypress/specs/TextArea.cy.tsx
index 6db77dbdf060..0211883fa1a2 100644
--- a/packages/main/cypress/specs/TextArea.cy.tsx
+++ b/packages/main/cypress/specs/TextArea.cy.tsx
@@ -847,3 +847,121 @@ describe("TextArea general interaction", () => {
 		});
 	});
 });
+
+describe("Validation inside a form", () => {
+	it("has correct validity for valueMissing", () => {
+		cy.mount(
+			<form>
+				<TextArea id="textareaForm" required maxlength={10} show-exceeded-text="true"/>
+				<button type="submit" id="submitBtn">Submit</button>
+			</form>
+		);
+
+		cy.get("form").then($form => {
+			$form.get(0).addEventListener("submit", (e) => e.preventDefault());
+			$form.get(0).addEventListener("submit", cy.stub().as("submit"));
+		});
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("[ui5-textarea]")
+			.as("textarea")
+			.ui5AssertValidityState({
+				formValidity: { valueMissing: true },
+				validity: { valueMissing: true, valid: false },
+				checkValidity: false,
+				reportValidity: false
+			});
+
+		cy.get("#textareaForm:invalid")
+			.should("exist");
+
+		cy.get("@textarea")
+			.realType("Albania");
+
+		cy.get("@textarea")
+			.ui5AssertValidityState({
+				formValidity: { valueMissing: false },
+				validity: { valueMissing: false, valid: true },
+				checkValidity: true,
+				reportValidity: true
+			});
+
+		cy.get("#textareaForm:invalid")
+			.should("not.exist");
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.calledOnce");
+	});
+
+	it("has correct validity for tooLong", () => {
+		cy.mount(
+			<form>
+				<TextArea id="textareaForm" required maxlength={10} show-exceeded-text="true"/>
+				<button type="submit" id="submitBtn">Submit</button>
+			</form>
+		);
+
+		cy.get("form").then($form => {
+			$form.get(0).addEventListener("submit", (e) => e.preventDefault());
+			$form.get(0).addEventListener("submit", cy.stub().as("submit"));
+		});
+
+		cy.get("[ui5-textarea]")
+			.as("textarea")
+			.realClick()
+			.realType("Some long text");
+
+		cy.get("@textarea")
+			.should("have.value", "Some long text");
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("@textarea")
+			.ui5AssertValidityState({
+				formValidity: { tooLong: true },
+				validity: { tooLong: true, valid: false },
+				checkValidity: false,
+				reportValidity: false
+			});
+
+		cy.get("#textareaForm:invalid")
+			.should("exist");
+
+		cy.get("@textarea")
+			.shadow()
+			.find("textarea")
+			.clear();
+
+		cy.get("@textarea")
+			.realType("Short text");
+
+		cy.get("@textarea")
+			.ui5AssertValidityState({
+				formValidity: { tooLong: false },
+				validity: { tooLong: false, valid: true },
+				checkValidity: true,
+				reportValidity: true
+			});
+
+		cy.get("#textareaForm:invalid")
+			.should("not.exist");
+
+		cy.get("#submitBtn")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.calledOnce");
+	});
+});
diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
index 74a4c979eafe..bfc26327cf29 100644
--- a/packages/main/src/Input.ts
+++ b/packages/main/src/Input.ts
@@ -89,7 +89,6 @@ import {
 	INPUT_AVALIABLE_VALUES,
 	INPUT_SUGGESTIONS_OK_BUTTON,
 	INPUT_SUGGESTIONS_CANCEL_BUTTON,
-	FORM_TEXTFIELD_REQUIRED,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -652,7 +651,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	_handleLinkNavigation: boolean = false;
 
 	get formValidityMessage() {
-		return Input.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
+		return this.nativeInput?.validationMessage;
 	}
 
 	get _effectiveShowSuggestions() {
@@ -660,7 +659,11 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	}
 
 	get formValidity(): ValidityStateFlags {
-		return { valueMissing: this.required && !this.value };
+		return {
+			valueMissing: this.nativeInput?.validity.valueMissing,
+			typeMismatch: this.required && this.nativeInput?.validity.typeMismatch,
+			patternMismatch: this.nativeInput?.validity.patternMismatch,
+		};
 	}
 
 	async formElementAnchor() {
diff --git a/packages/main/src/InputTemplate.tsx b/packages/main/src/InputTemplate.tsx
index 3eae53793cee..c9cf951217de 100644
--- a/packages/main/src/InputTemplate.tsx
+++ b/packages/main/src/InputTemplate.tsx
@@ -33,6 +33,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						inner-input-with-icon={!!this.icon.length}
 						disabled={this.disabled}
 						readonly={this._readonly}
+						required={this.required}
 						value={this._innerValue}
 						placeholder={this._placeholder}
 						maxlength={this.maxlength}
diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts
index 1703900e3720..668f6cd6ab9e 100644
--- a/packages/main/src/MultiInput.ts
+++ b/packages/main/src/MultiInput.ts
@@ -23,6 +23,7 @@ import {
 	MULTIINPUT_ROLEDESCRIPTION_TEXT,
 	MULTIINPUT_VALUE_HELP_LABEL,
 	MULTIINPUT_VALUE_HELP,
+	FORM_MIXED_TEXTFIELD_REQUIRED,
 	MULTIINPUT_FILTER_BUTTON_LABEL,
 } from "./generated/i18n/i18n-defaults.js";
 import Input from "./Input.js";
@@ -154,6 +155,10 @@ class MultiInput extends Input implements IFormInputElement {
 	_skipOpenSuggestions: boolean;
 	_valueHelpIconPressed: boolean;
 
+	get formValidityMessage() {
+		return MultiInput.i18nBundle.getText(FORM_MIXED_TEXTFIELD_REQUIRED);
+	}
+
 	get formValidity(): ValidityStateFlags {
 		const tokens = (this.tokens || []);
 
diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
index 775e33a77098..71419cf8a8ac 100644
--- a/packages/main/src/TextArea.ts
+++ b/packages/main/src/TextArea.ts
@@ -32,6 +32,7 @@ import {
 	TEXTAREA_CHARACTERS_LEFT,
 	TEXTAREA_CHARACTERS_EXCEEDED,
 	FORM_TEXTFIELD_REQUIRED,
+	TEXTAREA_EXCEEDS_MAXLENGTH,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -350,11 +351,20 @@ class TextArea extends UI5Element implements IFormInputElement {
 	static i18nBundle: I18nBundle;
 
 	get formValidityMessage() {
-		return TextArea.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
+		if (this.formValidity.valueMissing) {
+			return TextArea.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
+		}
+
+		if (this.formValidity.tooLong) {
+			return TextArea.i18nBundle.getText(TEXTAREA_EXCEEDS_MAXLENGTH, this.value.length - (this.maxlength ?? 0));
+		}
 	}
 
 	get formValidity(): ValidityStateFlags {
-		return { valueMissing: this.required && !this.value };
+		return {
+			valueMissing: this.required && !this.value,
+			tooLong: this.showExceededText && (this.value.length > (this.maxlength ?? 0)),
+		};
 	}
 
 	async formElementAnchor() {
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 4787fa4fa447..499b49b72af2 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -525,6 +525,9 @@ TEXTAREA_CHARACTERS_LEFT={0} characters remaining
 #XTXT: Text for characters over
 TEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit
 
+#XTXT: Text for characters over in form
+TEXTAREA_EXCEEDS_MAXLENGTH =Value too long by {0} characters.
+
 #XFLD: Timepicker slider header
 TIMEPICKER_HOURS_LABEL=Hours
 
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index 29bf7c4db79c..abf48ebbf21c 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -413,6 +413,48 @@ <h3>ComboBox Composition</h3>
 			});
 		</script>
 	</div>
+	<div class="demo-section">
+		<ui5-title>Form validation</ui5-title>
+		<form id="formValidation">
+			<ui5-message-strip id="formValidationMessage" hidden></ui5-message-strip>
+			<ui5-combobox id="comboInAForm" class="combobox2auto" required>
+				<ui5-cb-item text="Algeria"></ui5-cb-item>
+				<ui5-cb-item text="Argentina"></ui5-cb-item>
+				<ui5-cb-item text="Bulgaria"></ui5-cb-item>
+				<ui5-cb-item text="Canada"></ui5-cb-item>
+				<ui5-cb-item text="Chile"></ui5-cb-item>
+			</ui5-combobox>
+			<br><br>
+			<ui5-button id="btnCheckFormValidity">Check Validity</ui5-button>
+		</form>
+		<script>
+			const btnCheckFormValidity = document.getElementById('btnCheckFormValidity');
+			const formValidationMessage = document.getElementById('formValidationMessage');
+			const comboInAForm = document.getElementById('comboInAForm');
+
+			btnCheckFormValidity.addEventListener('click', function () {
+				checkFormValidity('comboInAForm');
+			});
+
+			comboInAForm.addEventListener('ui5-change', function () {
+				setTimeout(() => {
+					checkFormValidity('comboInAForm', true);
+				}, 0);
+			});
+
+			function checkFormValidity(elementId, delayed = false) {
+				const element = document.getElementById(elementId);
+				const isValid = element.checkValidity();
+
+				element.reportValidity();
+
+				// Show result
+				formValidationMessage.hidden = false;
+				formValidationMessage.innerText = `checkValidity(): ${isValid} ${delayed ? '( Delayed check )' : ''}`;
+				formValidationMessage.design = isValid ? "Positive" : "Negative";
+			}
+		</script>
+	</div>
 	<div class="demo-section">
 		<span>Open ComboBox on focus</span>
 		<ui5-combobox id="comboFocus" class="combobox2auto" value="Bulgaria" accessible-name-ref="countryLabel">
diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
index b316450f4a20..14f166bca1c1 100644
--- a/packages/main/test/pages/Input.html
+++ b/packages/main/test/pages/Input.html
@@ -581,9 +581,47 @@ <h3>Input Composition</h3>
 		<ui5-suggestion-item text="上海"></ui5-suggestion-item>
 	</ui5-input>
 
-	<br>
+	<br><br>
+
+	<ui5-title>Form validation</ui5-title>
+	<form id="formValidation">
+		<ui5-message-strip id="formValidationMessage" hidden></ui5-message-strip>
+		<ui5-input id="inputInForm" required type="URL">
+			<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
+			<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
+			<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
+		</ui5-input>
+		<ui5-button id="btnCheckFormValidity">Check Validity</ui5-button>
+	</form>
+	<br><br>
 
 	<script>
+		const btnCheckFormValidity = document.getElementById('btnCheckFormValidity');
+		const formValidationMessage = document.getElementById('formValidationMessage');
+		const inputInForm = document.getElementById('inputInForm');
+
+		btnCheckFormValidity.addEventListener('click', function () {
+			checkFormValidity('inputInForm');
+		});
+
+		inputInForm.addEventListener('ui5-change', function () {
+			setTimeout(() => {
+				checkFormValidity('inputInForm', true);
+			}, 0);
+		});
+
+		function checkFormValidity(elementId, delayed = false) {
+			const element = document.getElementById(elementId);
+			const isValid = element.checkValidity();
+
+			element.reportValidity();
+
+			// Show result
+			formValidationMessage.hidden = false;
+			formValidationMessage.innerText = `checkValidity(): ${isValid} ${delayed ? '( Delayed check )' : ''}`;
+			formValidationMessage.design = isValid ? "Positive" : "Negative";
+		}
+
 		const dynamicValueState = document.getElementById("dynamic-value-state");
 		const dynamicValueStateTrigger = document.getElementById("dynamic-value-state-trigger");
 
diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html
index 2e3c384eefe6..20ddd9f28daa 100644
--- a/packages/main/test/pages/MultiComboBox.html
+++ b/packages/main/test/pages/MultiComboBox.html
@@ -678,6 +678,47 @@ <h3>MultiComboBox in Compact</h3>
 		<span>Submit event calls: <span id="mcb-form-submit">0</span></span>
 	</div>
 
+	<div class="demo-section">
+		<ui5-title>Form validation</ui5-title>
+		<form id="formValidation">
+			<ui5-message-strip id="formValidationMessage" hidden></ui5-message-strip>
+			<ui5-multi-combobox id="mcbInAForm" no-validation required>
+				<ui5-mcb-item text="Bulgaria"></ui5-mcb-item>
+				<ui5-mcb-item text="Denmark"></ui5-mcb-item>
+				<ui5-mcb-item text="England"></ui5-mcb-item>
+			</ui5-multi-combobox>
+			<br><br>
+			<ui5-button id="btnCheckFormValidity">Check Validity</ui5-button>
+		</form>
+		<script>
+			const btnCheckFormValidity = document.getElementById('btnCheckFormValidity');
+			const formValidationMessage = document.getElementById('formValidationMessage');
+			const comboInAForm = document.getElementById('mcbInAForm');
+
+			btnCheckFormValidity.addEventListener('click', function () {
+				checkFormValidity('mcbInAForm');
+			});
+
+			mcbInAForm.addEventListener('ui5-change', function () {
+				setTimeout(() => {
+					checkFormValidity('mcbInAForm', true);
+				}, 0);
+			});
+
+			function checkFormValidity(elementId, delayed = false) {
+				const element = document.getElementById(elementId);
+				const isValid = element.checkValidity();
+
+				element.reportValidity();
+
+				// Show result
+				formValidationMessage.hidden = false;
+				formValidationMessage.innerText = `checkValidity(): ${isValid} ${delayed ? '( Delayed check )' : ''}`;
+				formValidationMessage.design = isValid ? "Positive" : "Negative";
+			}
+		</script>
+	</div>
+
 	<script>
 		let selectionChangeEventsFired = 0;
 		var eventNameInput = document.getElementById("events-input");
diff --git a/packages/main/test/pages/MultiInput.html b/packages/main/test/pages/MultiInput.html
index cfbd08f60c7c..0a5e63eac68c 100644
--- a/packages/main/test/pages/MultiInput.html
+++ b/packages/main/test/pages/MultiInput.html
@@ -312,7 +312,7 @@ <h1>Composition</h1>
 			<ui5-suggestion-item text="사랑"></ui5-suggestion-item>
 			<ui5-suggestion-item text="한국"></ui5-suggestion-item>
 		</ui5-multi-input>
-		
+
 		<ui5-title>Japanese</ui5-title>
 		<ui5-multi-input show-suggestions show-value-help-icon id="suggestion-token-japanese" placeholder="Type in Japanese ...">
 			<ui5-suggestion-item text="こんにちは"></ui5-suggestion-item>
@@ -320,7 +320,7 @@ <h1>Composition</h1>
 			<ui5-suggestion-item text="日本"></ui5-suggestion-item>
 			<ui5-suggestion-item text="東京"></ui5-suggestion-item>
 		</ui5-multi-input>
-		
+
 		<ui5-title>Chinese</ui5-title>
 		<ui5-multi-input show-suggestions show-value-help-icon id="suggestion-token-chinese" placeholder="Type in Chinese ...">
 			<ui5-suggestion-item text="你好"></ui5-suggestion-item>
@@ -431,7 +431,44 @@ <h1 class="sample-container-title">Token delete</h1>
 		<ui5-token slot="tokens" text="excepteur"></ui5-token>
 	</ui5-multi-input>
 
+	<ui5-title>Form validation</ui5-title>
+	<form id="formValidation">
+		<ui5-message-strip id="formValidationMessage" hidden></ui5-message-strip>
+		<ui5-multi-input show-suggestions show-value-help-icon id="suggestion-token-inform" required>
+			<ui5-suggestion-item text="Aute"></ui5-suggestion-item>
+			<ui5-suggestion-item text="ad"></ui5-suggestion-item>
+			<ui5-suggestion-item text="exercitation"></ui5-suggestion-item>
+		</ui5-multi-input>
+		<ui5-button id="btnCheckFormValidity">Check Validity</ui5-button>
+	</form>
+	<br><br>
+
 	<script>
+		const btnCheckFormValidity = document.getElementById('btnCheckFormValidity');
+		const formValidationMessage = document.getElementById('formValidationMessage');
+		const miInForm = document.getElementById('suggestion-token-inform');
+
+		btnCheckFormValidity.addEventListener('click', function () {
+			checkFormValidity('suggestion-token-inform');
+		});
+
+		miInForm.addEventListener('ui5-change', function () {
+			setTimeout(() => {
+				checkFormValidity('suggestion-token-inform', true);
+			}, 0);
+		});
+
+		function checkFormValidity(elementId, delayed = false) {
+			const element = document.getElementById(elementId);
+			const isValid = element.checkValidity();
+
+			element.reportValidity();
+
+			// Show result
+			formValidationMessage.hidden = false;
+			formValidationMessage.innerText = `checkValidity(): ${isValid} ${delayed ? '( Delayed check )' : ''}`;
+			formValidationMessage.design = isValid ? "Positive" : "Negative";
+		}
 
 		var createTokenFromText = function (text) {
 			var token = document.createElement("ui5-token");
@@ -488,6 +525,21 @@ <h1 class="sample-container-title">Token delete</h1>
 			document.getElementById("dialog").open = true;
 		});
 
+		document.getElementById("suggestion-token-inform").addEventListener("ui5-value-help-trigger", function (event) {
+			var list = document.getElementById("tokens-list");
+
+			list.innerHTML = "";
+
+			event.target.tokens.forEach(function (token) {
+				var li = document.createElement("ui5-li");
+				li.innerHTML = token.text;
+
+				list.appendChild(li);
+			});
+
+			document.getElementById("dialog").open = true;
+		});
+
 		document.getElementById("suggestion-token").addEventListener("ui5-change", function (event) {
 			var text = event.target.value;
 
@@ -496,6 +548,14 @@ <h1 class="sample-container-title">Token delete</h1>
 			event.target.value = "";
 		});
 
+		document.getElementById("suggestion-token-inform").addEventListener("ui5-change", function (event) {
+			var text = event.target.value;
+
+			addTokenToMI(createTokenFromText(text), "suggestion-token-inform");
+
+			event.target.value = "";
+		});
+
 		document.getElementById("basic-overflow-and-icon").addEventListener("ui5-value-help-trigger", function (event) {
 			document.getElementById("basic-event-listener").innerHTML = "value help icon press";
 		});
@@ -516,6 +576,7 @@ <h1 class="sample-container-title">Token delete</h1>
 		document.getElementById("token-unique").addEventListener("ui5-token-delete", handleTokenDelete);
 		document.getElementById("test-token-delete").addEventListener("ui5-token-delete", handleTokenDelete);
 		document.getElementById("suggestion-token").addEventListener("ui5-token-delete", handleTokenDelete);
+		document.getElementById("suggestion-token-inform").addEventListener("ui5-token-delete", handleTokenDelete);
 		document.getElementById("two-tokens").addEventListener("ui5-token-delete", handleTokenDelete);
 		document.getElementById("readonly-mi").addEventListener("ui5-token-delete", handleTokenDelete);
 
diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html
index aa000d6d2b1f..4f5696a4f351 100644
--- a/packages/main/test/pages/TextArea.html
+++ b/packages/main/test/pages/TextArea.html
@@ -225,7 +225,43 @@
 		<ui5-textarea id="textarea-accessible-description-both" class="textarea-width" accessible-description="Direct description" accessible-description-ref="external-desc" placeholder="TextArea with both direct and referenced descriptions"></ui5-textarea>
 	</section>
 
+	<section class="group">
+		<ui5-title>Form validation</ui5-title>
+		<form id="formValidation">
+			<ui5-message-strip id="formValidationMessage" hidden></ui5-message-strip>
+			<ui5-textarea id="textareaForm" required maxlength="10" show-exceeded-text="true" rows="1"></ui5-textarea>
+			<ui5-button id="btnCheckFormValidity">Check Validity</ui5-button>
+		</form>
+	</section>
+		<br><br>
+
 	<script>
+		const btnCheckFormValidity = document.getElementById('btnCheckFormValidity');
+		const formValidationMessage = document.getElementById('formValidationMessage');
+		const textareaForm = document.getElementById('textareaForm');
+
+		btnCheckFormValidity.addEventListener('click', function () {
+			checkFormValidity('textareaForm');
+		});
+
+		textareaForm.addEventListener('ui5-change', function () {
+			setTimeout(() => {
+				checkFormValidity('textareaForm', true);
+			}, 0);
+		});
+
+		function checkFormValidity(elementId, delayed = false) {
+			const element = document.getElementById(elementId);
+			const isValid = element.checkValidity();
+
+			element.reportValidity();
+
+			// Show result
+			formValidationMessage.hidden = false;
+			formValidationMessage.innerText = `checkValidity(): ${isValid} ${delayed ? '( Delayed check )' : ''}`;
+			formValidationMessage.design = isValid ? "Positive" : "Negative";
+		}
+
 		var changeCounter = 0;
 		var inputCounter = 0;