fix: remove period from default and missing error messages (#5132)

components/form/docs/form-element-wrapping.md

@@ -99,9 +99,9 @@ Now that our native input's validity state is being validated we can define cust
 ```javascript
 get validationMessage() {
 	if (this.validity.valueMissing) {
-		return 'Value is required.';
+		return 'Value is required';
 	} else if (this.validity.patternMismatch) {
-		return 'Invalid country code.';
+		return 'Invalid country code';
 	}
 	// Don't forget to call super.validationMessage to provide a default error message.
 	return super.validationMessage;

components/form/test/form-element-localize-helper.test.js

@@ -34,14 +34,14 @@ describe('form-element-localize-helper', () => {
 		it('should localize required error', async() => {
 			input.required = true;
 			const errorMessage = localizeFormElement(localize, input);
-			expect(errorMessage).to.equal('Field is required.');
+			expect(errorMessage).to.equal('Field is required');
 		});
 
 		it('should localize unknown error', async() => {
 			input.pattern = '[A-Za-z]{3}';
 			input.value = 'A';
 			const errorMessage = localizeFormElement(localize, input);
-			expect(errorMessage).to.equal('Field is invalid.');
+			expect(errorMessage).to.equal('Field is invalid');
 		});
 
 	});

components/form/test/form-element.test.js

@@ -106,13 +106,13 @@ describe('form-element', () => {
 
 		it('should set validation message if validate has errors', async() => {
 			await formElement.requestValidate();
-			expect(formElement.validationError).to.equal('Test form element is required.');
+			expect(formElement.validationError).to.equal('Test form element is required');
 		});
 
 		[true, false].forEach(showNewErrors => {
 			it('should remove message if validate has no errors', async() => {
 				await formElement.requestValidate(true);
-				expect(formElement.validationError).to.equal('Test form element is required.');
+				expect(formElement.validationError).to.equal('Test form element is required');
 				formElement.value = 'Non-empty';
 				await formElement.validate(showNewErrors);
 				expect(formElement.validationError).to.null;
@@ -122,7 +122,7 @@ describe('form-element', () => {
 		[true, false].forEach(showNewErrors => {
 			it('should update the validation message if validate has errors', async() => {
 				await formElement.validate(true);
-				expect(formElement.validationError).to.equal('Test form element is required.');
+				expect(formElement.validationError).to.equal('Test form element is required');
 				formElement.value = 'Non-empty';
 				formElement.isValidationCustomValid = false;
 				await formElement.validate(showNewErrors);
@@ -148,14 +148,14 @@ describe('form-element', () => {
 
 		it('should validate native element validity state', async() => {
 			const errors = await formElement.validate();
-			expect(errors).to.include.members(['Test form element is required.']);
+			expect(errors).to.include.members(['Test form element is required']);
 		});
 
 		it('should validate with default validity state message', async() => {
 			formElement.value = 'Non-empty';
 			formElement.setValidity({ badInput: true });
 			const errors = await formElement.validate();
-			expect(errors).to.include.members(['Test form element is invalid.']);
+			expect(errors).to.include.members(['Test form element is invalid']);
 		});
 
 		it('should validate with overridden validity state message', async() => {
@@ -185,7 +185,7 @@ describe('form-element', () => {
 
 		it('should show validation errors by default', async() => {
 			await formElement.requestValidate();
-			expect(formElement.validationError).to.equal('Test form element is required.');
+			expect(formElement.validationError).to.equal('Test form element is required');
 		});
 
 		it('should not be marked as invalid when show errors is false', async() => {
@@ -199,7 +199,7 @@ describe('form-element', () => {
 	describe('resetValidation', () => {
 		it('should reset validation errors', async() => {
 			await formElement.requestValidate();
-			expect(formElement.validationError).to.equal('Test form element is required.');
+			expect(formElement.validationError).to.equal('Test form element is required');
 			formElement.resetValidation();
 			expect(formElement.invalid).to.be.false;
 			expect(formElement.validationError).to.be.null;

components/form/test/form-native.test.js

@@ -55,7 +55,7 @@ describe('d2l-form-native', () => {
 		it('should validate native form elements', async() => {
 			const errors = await form.validate();
 			const ele = form.querySelector('#pets');
-			expect(errors.get(ele)).to.include.members(['Pets is required.']);
+			expect(errors.get(ele)).to.include.members(['Pets is required']);
 		});
 
 		it('should validate custom form elements', async() => {

components/form/test/form.test.js

@@ -68,7 +68,7 @@ describe('d2l-form', () => {
 			it('should validate native form elements', async() => {
 				const errors = await form.validate();
 				const ele = form.querySelector('#pets');
-				expect(errors.get(ele)).to.include.members(['Pets is required.']);
+				expect(errors.get(ele)).to.include.members(['Pets is required']);
 			});
 
 			it('should validate custom form elements', async() => {
@@ -91,7 +91,7 @@ describe('d2l-form', () => {
 			it('should validate and clear native form elements', async() => {
 				const errors = await form.validate();
 				const ele = form.querySelector('#pets');
-				expect(errors.get(ele)).to.include.members(['Pets is required.']);
+				expect(errors.get(ele)).to.include.members(['Pets is required']);
 				expect(form._errors.size).to.be.greaterThan(0);
 				form.resetValidation();
 				expect(form._errors.size).to.equal(0);
@@ -259,15 +259,15 @@ describe('d2l-form', () => {
 					const expectedErrors = [
 						[form.querySelector('#mycheck'), ['The checkbox failed validation']],
 						...(nestedFormEle.noNesting ? [] : [
-							[nestedFormEle.querySelector('#nested-home-planet'), ['Home planet is required.']],
+							[nestedFormEle.querySelector('#nested-home-planet'), ['Home planet is required']],
 							[nestedFormEle.querySelector('#nested-story'), ['Wrong story']],
-							[nestedFormEle.querySelector('#nested-custom-ele'), ['Test form element is required.']],
+							[nestedFormEle.querySelector('#nested-custom-ele'), ['Test form element is required']],
 						]),
-						[form.querySelector('#pets'), ['Pets is required.']],
+						[form.querySelector('#pets'), ['Pets is required']],
 						...(composedNestedFormEle.noNesting ? [] : [
-							[composedNestedFormEle.shadowRoot.querySelector('#composed-nested-first-name'), ['First Name is required.']],
+							[composedNestedFormEle.shadowRoot.querySelector('#composed-nested-first-name'), ['First Name is required']],
 							[composedNestedFormEle.shadowRoot.querySelector('#composed-nested-pets'), ['Expected Hamster']],
-							[composedNestedFormEle.shadowRoot.querySelector('#composed-nested-custom-ele'), ['Test form element is required.']],
+							[composedNestedFormEle.shadowRoot.querySelector('#composed-nested-custom-ele'), ['Test form element is required']],
 						]),
 						[formElement, ['Test form element failed with an overridden validation message']]
 					];
@@ -401,18 +401,18 @@ describe('d2l-form', () => {
 				let errors = await elem.validate();
 
 				expect([...errors.entries()]).to.deep.equal([
-					[elem.querySelector('d2l-test-two-forms').shadowRoot.querySelector('[name="input1"]'), ['Input 1 is required.']],
-					[elem.querySelector('d2l-test-two-forms').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required.']],
-					[elem.querySelector('[name="input3"]'), ['Input 3 is required.']],
+					[elem.querySelector('d2l-test-two-forms').shadowRoot.querySelector('[name="input1"]'), ['Input 1 is required']],
+					[elem.querySelector('d2l-test-two-forms').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required']],
+					[elem.querySelector('[name="input3"]'), ['Input 3 is required']],
 				]);
 
 				elem.querySelector('d2l-test-two-forms').shadowRoot.querySelector('#nested-form-1').remove();
 
 				errors = await elem.validate();
 
 				expect([...errors.entries()]).to.deep.equal([
-					[elem.querySelector('d2l-test-two-forms').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required.']],
-					[elem.querySelector('[name="input3"]'), ['Input 3 is required.']],
+					[elem.querySelector('d2l-test-two-forms').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required']],
+					[elem.querySelector('[name="input3"]'), ['Input 3 is required']],
 				]);
 
 			});
@@ -437,22 +437,22 @@ describe('d2l-form', () => {
 				let errors = await form.validate();
 
 				expect([...errors.entries()]).to.deep.equal([
-					[form.querySelector('[id="nested-elem-1"]').shadowRoot.querySelector('[name="input1"]'), ['Input 1 is required.']],
-					[form.querySelector('[id="nested-elem-1"]').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required.']],
-					[form.querySelector('[id="nested-elem-2"]').shadowRoot.querySelector('[name="input1"]'), ['Input 1 is required.']],
-					[form.querySelector('[id="nested-elem-2"]').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required.']],
-					[form.querySelector('[name="input3"]'), ['Input 3 is required.']],
+					[form.querySelector('[id="nested-elem-1"]').shadowRoot.querySelector('[name="input1"]'), ['Input 1 is required']],
+					[form.querySelector('[id="nested-elem-1"]').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required']],
+					[form.querySelector('[id="nested-elem-2"]').shadowRoot.querySelector('[name="input1"]'), ['Input 1 is required']],
+					[form.querySelector('[id="nested-elem-2"]').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required']],
+					[form.querySelector('[name="input3"]'), ['Input 3 is required']],
 				]);
 
 				form.querySelector('[id="nested-elem-1"]').shadowRoot.querySelector('#nested-form-1').remove();
 
 				errors = await form.validate();
 
 				expect([...errors.entries()]).to.deep.equal([
-					[form.querySelector('[id="nested-elem-1"]').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required.']],
-					[form.querySelector('[id="nested-elem-2"]').shadowRoot.querySelector('[name="input1"]'), ['Input 1 is required.']],
-					[form.querySelector('[id="nested-elem-2"]').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required.']],
-					[form.querySelector('[name="input3"]'), ['Input 3 is required.']],
+					[form.querySelector('[id="nested-elem-1"]').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required']],
+					[form.querySelector('[id="nested-elem-2"]').shadowRoot.querySelector('[name="input1"]'), ['Input 1 is required']],
+					[form.querySelector('[id="nested-elem-2"]').shadowRoot.querySelector('[name="input2"]'), ['Input 2 is required']],
+					[form.querySelector('[name="input3"]'), ['Input 3 is required']],
 				]);
 
 			});

components/inputs/input-text.js

@@ -106,6 +106,10 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			 * @type {string}
 			 */
 			pattern: { type: String },
+			/**
+			 * Text to display when input fails validation against the pattern
+			 */
+			patternFailureText: { type: String, attribute: 'pattern-failure-text' },
 			/**
 			 * @ignore
 			 */

components/inputs/test/input-number.test.js

@@ -259,7 +259,7 @@ describe('d2l-input-number', () => {
 				name: 'should be invalid when empty and required',
 				fixture: requiredFixture,
 				value: null,
-				expectedError: 'label is required.'
+				expectedError: 'label is required'
 			},
 			{
 				name: 'should be valid if number is in range',

components/inputs/test/input-text.test.js

@@ -222,7 +222,7 @@ describe('d2l-input-text', () => {
 			elem.required = true;
 
 			const errors = await elem.validate();
-			expect(errors).to.contain('label is required.');
+			expect(errors).to.contain('label is required');
 		});
 
 		it('should be valid when required has value', async() => {

components/inputs/test/input-textarea.test.js

@@ -70,7 +70,7 @@ describe('d2l-input-textarea', () => {
 			elem.required = true;
 
 			const errors = await elem.validate();
-			expect(errors).to.contain('label is required.');
+			expect(errors).to.contain('label is required');
 		});
 
 		it('should be valid when required has value', async() => {

lang/ar.js

@@ -35,15 +35,15 @@ export default {
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "تاريخ البدء: {startValue}",
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "تاريخ النهاية: {endValue}",
 	"components.filter-dimension-set-date-time-range-value.text": "نطاق التاريخ المخصص",
-	"components.form-element.defaultError": "{label} غير صالحة.",
+	"components.form-element.defaultError": "{label} غير صالحة",
 	"components.form-element.defaultFieldLabel": "الحقل",
 	"components.form-element.input.email.typeMismatch": "البريد الإلكتروني غير صالح",
 	"components.form-element.input.number.rangeError": "{minExclusive, select, true {{maxExclusive, select, true {يجب أن يكون الرقم أكبر من {min} وأقل من {max}.} other {يجب أن يكون الرقم أكبر من {min} وأقل من أو مساويًا لـ {max}.}}} other {{maxExclusive, select, true {يجب أن يكون الرقم أكبر من أو مساويًا لـ {min} وأقل من {max}.} other {يجب أن يكون الرقم أكبر من أو مساويًا لـ {min} وأقل من أو مساويًا لـ {max}.}}}}",
 	"components.form-element.input.number.rangeOverflow": "{maxExclusive, select, true {يجب أن يكون الرقم أقل من {max}.} other {يجب أن يكون الرقم أقل من أو مساويًا لـ {max}.}}",
 	"components.form-element.input.number.rangeUnderflow": "{minExclusive, select, true {يجب أن يكون الرقم أكبر من {min}.} other {يجب أن يكون الرقم أكبر من أو مساويًا لـ {min}.}}",
 	"components.form-element.input.text.tooShort": "يجب أن تتألف التسمية {label} من {minlength} من الأحرف على الأقل",
 	"components.form-element.input.url.typeMismatch": "عنوان URL غير صالح",
-	"components.form-element.valueMissing": "{label} مطلوبة.",
+	"components.form-element.valueMissing": "{label} مطلوبة",
 	"components.form-error-summary.errorSummary": "{count, plural, one {تم العثور على {count} خطأ في المعلومات التي أرسلتها} other {تم العثور على {count} من الأخطاء في المعلومات التي أرسلتها}}",
 	"components.form-error-summary.text": "تبديل تفاصيل الخطأ",
 	"components.input-color.backgroundColor": "لون الخلفية",

lang/cy.js

@@ -35,15 +35,15 @@ export default {
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Dyddiad Dechrau: {startValue}",
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "Dyddiad Dod i Ben: {endValue}",
 	"components.filter-dimension-set-date-time-range-value.text": "Ystod dyddiad pwrpasol",
-	"components.form-element.defaultError": "Mae {label} yn annilys.",
+	"components.form-element.defaultError": "Mae {label} yn annilys",
 	"components.form-element.defaultFieldLabel": "Maes",
 	"components.form-element.input.email.typeMismatch": "Nid yw'r e-bost yn ddilys",
 	"components.form-element.input.number.rangeError": "{minExclusive, select, true {{maxExclusive, select, true {Rhaid i'r nifer fod yn fwy na {min} a llai na {max}.} other {Rhaid i'r nifer fod yn fwy na {min} a llai na neu'n hafal i {max}.}}} other {{maxExclusive, select, true {Rhaid i'r nifer fod yn fwy na neu'n hafal i {min} a llai na {max}.} other {Rhaid i'r nifer fod yn fwy na neu'n hafal i {min} a llai na neu'n hafal i {max}.}}}}",
 	"components.form-element.input.number.rangeOverflow": "{maxExclusive, select, true {Rhaid i'r nifer fod yn llai na {max}.} other {Rhaid i'r nifer fod yn llai na neu’n hafal i {max}.}}",
 	"components.form-element.input.number.rangeUnderflow": "{minExclusive, select, true {Rhaid i'r nifer fod yn fwy na {min}.} other {Rhaid i'r nifer fod yn fwy na neu'n hafal i {min}.}}",
 	"components.form-element.input.text.tooShort": "Rhaid i {label} fod o leiaf {minlength} nod",
 	"components.form-element.input.url.typeMismatch": "Nid yw'r URL yn ddilys.",
-	"components.form-element.valueMissing": "Mae angen {label}.",
+	"components.form-element.valueMissing": "Mae angen {label}",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Canfuwyd {count} gwall yn y wybodaeth a gyflwynoch} other {Canfuwyd {count} gwall yn y wybodaeth a gyflwynoch}}",
 	"components.form-error-summary.text": "Toglo manylion gwall",
 	"components.input-color.backgroundColor": "Lliw Cefndir",

lang/da.js

@@ -35,15 +35,15 @@ export default {
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Startdato: {startValue}",
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "Slutdato: {endValue}",
 	"components.filter-dimension-set-date-time-range-value.text": "Brugerdefineret datointerval",
-	"components.form-element.defaultError": "{label} er ugyldigt.",
+	"components.form-element.defaultError": "{label} er ugyldigt",
 	"components.form-element.defaultFieldLabel": "Felt",
 	"components.form-element.input.email.typeMismatch": "E-mail er ikke gyldig",
 	"components.form-element.input.number.rangeError": "{minExclusive, select, true {{maxExclusive, select, true {Tallet skal være større end {min} og mindre end {max}.} other {Tallet skal være større end {min} og mindre eller lig med {max}.}}} other {{maxExclusive, select, true {Tallet skal være større end eller lig med {min} og mindre end {max}.} other {Tallet skal være større end eller lig med {min} og mindre end eller lig med {max}.}}}}",
 	"components.form-element.input.number.rangeOverflow": "{maxExclusive, select, true {Tallet skal være mindre end {max}.} other {Tallet skal være mindre end eller lig med {max}.}}",
 	"components.form-element.input.number.rangeUnderflow": "{minExclusive, select, true {Tallet skal være større end {min}.} other {Tallet skal være større end eller lig med {min}.}}",
 	"components.form-element.input.text.tooShort": "{label} skal være på mindst {minlength} tegn",
 	"components.form-element.input.url.typeMismatch": "URL-adresse er ikke gyldig",
-	"components.form-element.valueMissing": "{label} er påkrævet.",
+	"components.form-element.valueMissing": "{label} er påkrævet",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Der blev fundet {count} fejl i de oplysninger, du indsendte} other {Der blev fundet {count} fejl i de oplysninger, du indsendte}}",
 	"components.form-error-summary.text": "Slå fejloplysninger til/fra",
 	"components.input-color.backgroundColor": "Baggrundsfarve",