Add validation of the target file name in the "Save As" tab.

Author: drgrice1

htdocs/js/PGProblemEditor/pgproblemeditor.js

@@ -380,37 +380,55 @@
 		}
 	});
 
+	const removeValidationErrors = (input) => {
+		input?.classList.remove('is-invalid');
+		input.setCustomValidity('');
+	};
+
+	const validateInput = (e, input, isInvalid, defaultMessage, report) => {
+		if (isInvalid) {
+			e.preventDefault();
+			input.classList.add('is-invalid');
+			input.setCustomValidity(input.dataset.errorMessage ?? defaultMessage);
+			if (report) input.reportValidity();
+			return false;
+		}
+		removeValidationErrors(input);
+		return true;
+	};
+
+	// Validation of the target file for the save as tab.
+	const saveAsTargetFile = document.getElementsByName('action.save_as.target_file')?.[0];
+	saveAsTargetFile.addEventListener('keyup', () => {
+		if (saveAsTargetFile.value) removeValidationErrors(saveAsTargetFile);
+	});
+
 	// Validation of the target set for the save as tab.
 	const saveAsSaveModeRadios = document.getElementsByName('action.save_as.saveMode');
 	const saveToTargetSetRadio = Array.from(saveAsSaveModeRadios).find(
 		(r) => r.id === 'action_save_as_saveMode_new_problem_id' || r.id === 'action_save_as_saveMode_set_header_id'
 	);
 	const targetSetSelect = document.getElementsByName('action.save_as.targetSet')?.[0];
 	const actionSaveAs = document.getElementById('save_as');
-	const removeSetSelectErrors = () => {
-		targetSetSelect?.classList.remove('is-invalid');
-		targetSetSelect?.setCustomValidity('');
-	};
 	for (const radio of saveAsSaveModeRadios) {
-		radio.addEventListener('change', removeSetSelectErrors);
+		radio.addEventListener('change', () => removeValidationErrors(targetSetSelect));
 	}
 	const saveToTargetSetSelected = () => {
 		saveToTargetSetRadio.checked = true;
-		if (targetSetSelect?.value) removeSetSelectErrors();
+		if (targetSetSelect?.value) removeValidationErrors(targetSetSelect);
 	};
 	targetSetSelect?.addEventListener('change', saveToTargetSetSelected);
 	targetSetSelect?.addEventListener('focusin', saveToTargetSetSelected);
 
 	document.forms.editor?.addEventListener('submit', (e) => {
 		if (actionSaveAs && actionSaveAs.classList.contains('active')) {
-			if (saveToTargetSetRadio?.checked && !targetSetSelect?.value) {
-				e.preventDefault();
-				targetSetSelect.classList.add('is-invalid');
-				targetSetSelect.setCustomValidity(targetSetSelect.dataset.errorMessage ?? 'Please select a set.');
-				targetSetSelect.reportValidity();
-				return;
+			let report = true;
+			for (const validationData of [
+				[saveAsTargetFile, saveAsTargetFile?.value === '', 'Please enter a filename.'],
+				[targetSetSelect, saveToTargetSetRadio?.checked && !targetSetSelect?.value, 'Please select a set.']
+			]) {
+				if (!validateInput(e, ...validationData, report)) report = false;
 			}
-			removeSetSelectErrors();
 		}
 	});
 

templates/ContentGenerator/Instructor/PGProblemEditor/save_as_form.html.ep

@@ -34,6 +34,7 @@
 				<%= text_field 'action.save_as.target_file' => $shortFilePath,
 					id => 'action_save_as_target_file_id', class => 'form-control form-control-sm',
 					size => 60, dir  => 'ltr',
+					data => { error_message => maketext('Please enter a filename.') },
 					# Don't allow changing the file name for course info files.
 					# The filename needs to be what is set in the course environment.
 					$c->{file_type} eq 'course_info' ? (readonly => undef) : () =%>