Show validation message on empty fields in issue reporter, fixes microsoft#104472

Rachel Macfarlane · Rachel Macfarlane · commit fe4d4f7d027e · 2020-08-12T10:47:43.000-07:00
diff --git a/src/vs/code/electron-sandbox/issue/issueReporterMain.ts b/src/vs/code/electron-sandbox/issue/issueReporterMain.ts
@@ -812,11 +812,14 @@ export class IssueReporter extends Disposable {
 
 	private validateInput(inputId: string): boolean {
 		const inputElement = (<HTMLInputElement>this.getElementById(inputId));
+		const inputValidationMessage = this.getElementById(`${inputId}-empty-error`);
 		if (!inputElement.value) {
 			inputElement.classList.add('invalid-input');
+			inputValidationMessage?.classList.remove('hidden');
 			return false;
 		} else {
 			inputElement.classList.remove('invalid-input');
+			inputValidationMessage?.classList.add('hidden');
 			return true;
 		}
 	}
diff --git a/src/vs/code/electron-sandbox/issue/issueReporterPage.ts b/src/vs/code/electron-sandbox/issue/issueReporterPage.ts
@@ -23,6 +23,7 @@ export default (): string => `
 			<select id="issue-source" class="inline-form-control" required>
 				<!-- To be dynamically filled -->
 			</select>
+			<div id="issue-source-empty-error" class="validation-error hidden" role="alert">${escape(localize('issueSourceEmptyValidation', "An issue source is required."))}</div>
 			<div id="problem-source-help-text" class="instructions hidden">${escape(localize('disableExtensionsLabelText', "Try to reproduce the problem after {0}. If the problem only reproduces when extensions are active, it is likely an issue with an extension."))
 		.replace('{0}', `<span tabIndex=0 role="button" id="disableExtensions" class="workbenchCommand">${escape(localize('disableExtensions', "disabling all extensions and reloading the window"))}</span>`)}
 			</div>
@@ -43,6 +44,7 @@ export default (): string => `
 		<div class="input-group">
 			<label class="inline-label" for="issue-title">${escape(localize('issueTitleLabel', "Title"))} <span class="required-input">*</span></label>
 			<input id="issue-title" type="text" class="inline-form-control" placeholder="${escape(localize('issueTitleRequired', "Please enter a title."))}" required>
+			<div id="issue-title-empty-error" class="validation-error hidden" role="alert">${escape(localize('titleEmptyValidation', "A title is required."))}</div>
 			<div id="issue-title-length-validation-error" class="validation-error hidden" role="alert">${escape(localize('titleLengthValidation', "The title is too long."))}</div>
 			<small id="similar-issues">
 				<!-- To be dynamically filled -->
@@ -61,6 +63,7 @@ export default (): string => `
 		<div class="block-info-text">
 			<textarea name="description" id="description" placeholder="${escape(localize('details', "Please enter details."))}" required></textarea>
 		</div>
+		<div id="description-empty-error" class="validation-error hidden" role="alert">${escape(localize('descriptionEmptyValidation', "A description is required."))}</div>
 	</div>
 
 	<div class="system-info" id="block-container">
diff --git a/src/vs/code/electron-sandbox/issue/media/issueReporter.css b/src/vs/code/electron-sandbox/issue/media/issueReporter.css
@@ -201,9 +201,10 @@ select, input, textarea {
 }
 
 
-.validation-error {
+#issue-reporter .validation-error {
 	font-size: 12px;
-	margin-top: 1em;
+	padding: 10px;
+	border-top: 0px !important;
 }
 
 
@@ -256,8 +257,7 @@ a {
 }
 
 .section .input-group .validation-error {
-	margin-left: calc(15% + 5px);
-	padding: 10px;
+	margin-left: 100px;
 }
 
 .section .inline-form-control, .section .inline-label {
@@ -268,7 +268,7 @@ a {
 	width: 95px;
 }
 
-.section .inline-form-control {
+.section .inline-form-control, .section .input-group .validation-error  {
 	width: calc(100% - 100px);
 }
 
@@ -294,9 +294,13 @@ a {
 		margin-left: calc(15% + 1em);
 	}
 
-	.section .inline-form-control  {
+	.section .inline-form-control, .section .input-group .validation-error  {
 		width: calc(85% - 5px);
 	}
+
+	.section .input-group .validation-error {
+		margin-left: calc(15% + 4px);
+	}
 }
 
 @media (max-width: 620px) {
@@ -308,7 +312,7 @@ a {
 		margin-left: 1em;
 	}
 
-	.section .inline-form-control {
+	.section .inline-form-control, .section .input-group .validation-error  {
 		width: 100%;
 	}
 

Original file line number	Diff line number	Diff line change
`@@ -812,11 +812,14 @@ export class IssueReporter extends Disposable {`
`812`	`812`
`813`	`813`	`private validateInput(inputId: string): boolean {`
`814`	`814`	`const inputElement = (<HTMLInputElement>this.getElementById(inputId));`
	`815`	+ const inputValidationMessage = this.getElementById(`${inputId}-empty-error`);
`815`	`816`	`if (!inputElement.value) {`
`816`	`817`	`inputElement.classList.add('invalid-input');`
	`818`	`+ inputValidationMessage?.classList.remove('hidden');`
`817`	`819`	`return false;`
`818`	`820`	`} else {`
`819`	`821`	`inputElement.classList.remove('invalid-input');`
	`822`	`+ inputValidationMessage?.classList.add('hidden');`
`820`	`823`	`return true;`
`821`	`824`	`}`
`822`	`825`	`}`
Original file line number	Diff line number	Diff line change
`@@ -201,9 +201,10 @@ select, input, textarea {`
`201`	`201`	`}`
`202`	`202`
`203`	`203`
`204`		`-.validation-error {`
	`204`	`+#issue-reporter .validation-error {`
`205`	`205`	`font-size: 12px;`
`206`		`- margin-top: 1em;`
	`206`	`+ padding: 10px;`
	`207`	`+ border-top: 0px !important;`
`207`	`208`	`}`
`208`	`209`
`209`	`210`
`@@ -256,8 +257,7 @@ a {`
`256`	`257`	`}`
`257`	`258`
`258`	`259`	`.section .input-group .validation-error {`
`259`		`- margin-left: calc(15% + 5px);`
`260`		`- padding: 10px;`
	`260`	`+ margin-left: 100px;`
`261`	`261`	`}`
`262`	`262`
`263`	`263`	`.section .inline-form-control, .section .inline-label {`
`@@ -268,7 +268,7 @@ a {`
`268`	`268`	`width: 95px;`
`269`	`269`	`}`
`270`	`270`
`271`		`-.section .inline-form-control {`
	`271`	`+.section .inline-form-control, .section .input-group .validation-error {`
`272`	`272`	`width: calc(100% - 100px);`
`273`	`273`	`}`
`274`	`274`
`@@ -294,9 +294,13 @@ a {`
`294`	`294`	`margin-left: calc(15% + 1em);`
`295`	`295`	`}`
`296`	`296`
`297`		`- .section .inline-form-control {`
	`297`	`+ .section .inline-form-control, .section .input-group .validation-error {`
`298`	`298`	`width: calc(85% - 5px);`
`299`	`299`	`}`
	`300`	`+`
	`301`	`+ .section .input-group .validation-error {`
	`302`	`+ margin-left: calc(15% + 4px);`
	`303`	`+ }`
`300`	`304`	`}`
`301`	`305`
`302`	`306`	`@media (max-width: 620px) {`
`@@ -308,7 +312,7 @@ a {`
`308`	`312`	`margin-left: 1em;`
`309`	`313`	`}`
`310`	`314`
`311`		`- .section .inline-form-control {`
	`315`	`+ .section .inline-form-control, .section .input-group .validation-error {`
`312`	`316`	`width: 100%;`
`313`	`317`	`}`
`314`	`318`