chore: extend form-validity test for ui5-checkbox and ui5-select

packages/main/cypress/specs/CheckBox.cy.tsx

@@ -19,3 +19,51 @@ describe('CheckBox Component', () => {
 
 });
 
+describe("Validation inside a form", () => {
+	it("has correct validity", () => {
+		cy.mount(<form method="get">
+			<CheckBox id="cb" name="checkbox5" required text="unchecked ui5-checkbox with name and required" > </CheckBox>
+			<button type="submit" > Submits forms </button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#cb")
+			.then($el => {
+				const checkbox = $el[0] as CheckBox;
+				expect(checkbox.formValidity.valueMissing, "Unchecked required checkbox should have formValidity with valueMissing=true").to.be.true;
+				expect(checkbox.validity.valueMissing, "Unchecked required checkbox should have validity with valueMissing=true").to.be.true;
+				expect(checkbox.validity.valid, "Unchecked required checkbox should have validity with valid=false").to.be.false;
+				expect(checkbox.checkValidity(), "Unchecked required checkbox should fail validity check").to.be.false;
+				expect(checkbox.reportValidity(), "Unchecked required checkbox should fail report validity").to.be.false;
+			});
+
+		cy.get("#cb:invalid") // select using :invalid CSS pseudo-class
+			.should("exist", "Unchecked required checkbox should have :invalid CSS class");
+
+		cy.get("#cb") // check the required checkbox
+			.realClick();
+
+		cy.get("#cb")
+			.then($el => {
+				const checkbox = $el[0] as CheckBox;
+				expect(checkbox.formValidity.valueMissing, "Checked required checkbox should have formValidity with valueMissing=false").to.be.false;
+				expect(checkbox.validity.valueMissing, "Checked required checkbox should have validity with valueMissing=false").to.be.false;
+				expect(checkbox.validity.valid, "Checked required checkbox should have validity with valid=true").to.be.true;
+				expect(checkbox.checkValidity(), "Checked required checkbox should pass validity check").to.be.true;
+				expect(checkbox.reportValidity(), "Checked required checkbox should pass report validity").to.be.true;
+			});
+
+		cy.get("#cb:invalid").should("not.exist", "Checked required checkbox should not have :invalid CSS class");
+	});
+});
+

packages/main/cypress/specs/Select.cy.tsx

@@ -250,3 +250,61 @@ describe("Select - Properties", () => {
 		cy.get("[ui5-select]").should("have.prop", "formFormattedValue", "");
 	});
 });
+
+describe("Select - Validation", () => {
+	it("has correct validity", () => {
+		cy.mount(
+			<form method="get">
+				<Select id="sel1" name="select1" required>
+					<Option value="">Select an option</Option>
+					<Option value="option1">Option 1</Option>
+					<Option value="option2">Option 2</Option>
+				</Select>
+				<button type="submit">Submit</button>
+			</form>
+		);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#sel1")
+			.then($el => {
+				const select = $el[0] as Select;
+				expect(select.formValidity.valueMissing, "Required Select with empty value should have formValidity with valueMissing=true").to.be.true;
+				expect(select.validity.valueMissing, "Required Select with empty value should have validity with valueMissing=true").to.be.true;
+				expect(select.validity.valid, "Required Select with empty value should have validity with valid=false").to.be.false;
+				expect(select.checkValidity(), "Required Select with empty value should fail validity check").to.be.false;
+				expect(select.reportValidity(), "Required Select with empty value should fail report validity").to.be.false;
+			});
+
+		cy.get("#sel1:invalid").should("exist", "Required Select with empty value should have :invalid CSS class");
+
+		// select an option with a non-empty value
+		// this should make the Select valid
+		cy.get("#sel1")
+			.realClick()
+			.get("[ui5-option]")
+			.eq(1)
+			.realClick();
+
+		cy.get("#sel1")
+			.then($el => {
+				const select = $el[0] as Select;
+				expect(select.formValidity.valueMissing, "Required Select with non-empty value should have formValidity with valueMissing=false").to.be.false;
+				expect(select.validity.valueMissing, "Required Select with non-empty value should have validity with valueMissing=false").to.be.false;
+				expect(select.validity.valid, "Required Select with non-empty value should have validity with valid=true").to.be.true;
+				expect(select.checkValidity(), "Required Select with non-empty value should pass validity check").to.be.true;
+				expect(select.reportValidity(), "Required Select with non-empty value should pass report validity").to.be.true;
+			});
+
+		cy.get("#sel1:invalid").should("not.exist", "Required Select with non-empty value should not have :invalid CSS class");
+	});
+});

packages/main/test/pages/CheckBox.html

@@ -74,7 +74,17 @@
 	<ui5-checkbox class="defaultPreventedCb" indeterminate></ui5-checkbox>
 	<ui5-checkbox class="defaultPreventedCb" indeterminate checked></ui5-checkbox>
 
-	<br />
+	<section>
+		<ui5-title>Form validation:</ui5-title>
+		<form method="get">
+			<ui5-checkbox id="cbItem" text="I agree to the terms (required)" required value="agreement" name="agreement"></ui5-checkbox>
+			<br/><br/>
+			<ui5-button id="btnCheckFormValidity">Check Validity</ui5-button>
+			<ui5-message-strip id="formValidationMessage" hidden></ui5-message-strip>
+		</form>
+	</section>
+
+	<br/><br/>
 	<ui5-title>Form submission</ui5-title>
 	<form id="cbForm" method="get">
 		<ui5-checkbox id="cbItem1" text="Option 1" checked value="option1" name="option"></ui5-checkbox>
@@ -102,8 +112,11 @@
 		var input = document.querySelector("#field");
 		var checkBox1 = document.querySelector("#cb1");
 		var checkBox2 = document.querySelector("#cb2");
+		var checkBoxInAForm = document.querySelector("#cbItem");
 		var displayOnlyCb = document.querySelector("#displayOnlyCb");
 		var cbFormSubmitted = document.querySelector("#cbFormSubmitted");
+		var btnCheckFormValidity = document.getElementById('btnCheckFormValidity');
+		var formValidationMessage = document.getElementById('formValidationMessage');
 		var cdCustomAria = document.querySelector("#accCustomAria");
 		var counter = 0;
 
@@ -135,6 +148,28 @@
 
 			alert("Form submitted with query string: " + queryString);
 		});
+
+		btnCheckFormValidity.addEventListener('click', function() {
+			checkFormValidity('cbItem');
+		});
+
+		checkBoxInAForm.addEventListener('ui5-change', function() {
+			setTimeout(() => {
+				checkFormValidity('cbItem', 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>
 </body>
 

packages/main/test/pages/Select.html

@@ -244,6 +244,20 @@ <h2>icon prop</h2>
 		</ui5-select>
 	</section>
 
+	<section>
+		<ui5-title>Form validation</ui5-title>
+		<form id="formValidation">
+			<ui5-message-strip id="formValidationMessage" hidden></ui5-message-strip>
+			<ui5-select id="selectInAForm" name="select2" required>
+				<ui5-option value="">Please choose an option from the list:</ui5-option>
+				<ui5-option value="Cozy">Cozy</ui5-option>
+				<ui5-option value="Compact">Compact</ui5-option>
+				<ui5-option value="Condensed">Condensed</ui5-option>
+			</ui5-select>
+			<br><br>
+			<ui5-button id="btnCheckFormValidity">Check Validity</ui5-button>
+		</form>
+	</section>
 </body>
 <script>
 	var countries =  [{ key: "Aus", text: "Australia" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }];
@@ -260,7 +274,10 @@ <h2>icon prop</h2>
 	var select = document.getElementById('mySelect');
 	var select2 = document.getElementById('errorSelect');
 	var select3 = document.getElementById('warningSelect');
+	var selectInAForm = document.getElementById('selectInAForm');
 	var lbl = document.getElementById('lblResult');
+	var btnCheckFormValidity = document.getElementById('btnCheckFormValidity');
+	var formValidationMessage = document.getElementById('formValidationMessage');
 	var counter = 0;
 	var counterOpen = 0;
 	var counterClose = 0;
@@ -365,5 +382,27 @@ <h2>icon prop</h2>
 	btnSetInvalidValue.addEventListener("click", function(e) {
 		mySelect7.value = "NAN";
 	});
+
+	btnCheckFormValidity.addEventListener('click', function() {
+		checkFormValidity('selectInAForm');
+	});
+
+	selectInAForm.addEventListener('ui5-change', function() {
+		setTimeout(() => {
+			checkFormValidity('selectInAForm', 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>
 </html>

packages/main/test/pages/styles/CheckBox.css

@@ -15,3 +15,7 @@ ui5-checkbox:not(.ui5-cb-testing-wrap) {
     flex-direction: column;
     width: 250px
 }
+
+form ui5-checkbox:invalid {
+    outline: 2px solid var(--sapNegativeColor);
+}

packages/main/test/pages/styles/Select.css

@@ -1,3 +1,7 @@
 .select1auto {
     background-color: var(--sapBackgroundColor);
 }
+
+form ui5-select:invalid {
+    outline: 2px solid var(--sapNegativeColor);
+}