Refactor: Move Input Validation Into Function

[DiogenesAnalytics]

Problem

The JS code responsible for "validating" form inputs is being duplicated in the event listeners for the "Send" and "Download Form" button respectively.

Code:

• parley/scripts/form.js

  Lines 333 to 391 in b93298b

  	// Custom validation
  	send_button.addEventListener('click', function(event) {
  	// Prevent the default form submission behavior
  	event.preventDefault();
  	// Check if the form element is selected correctly
  	const contactForm = document.getElementById("contact-form");
  	const inputs = contactForm.querySelectorAll('input, textarea, select');
  	let customValidationFailed = false;
  	// Log to console
  	console.log("Beginning custom form validation");
  	// Begin input checking ...
  	inputs.forEach(input => {
  	let fieldValue = input.value;
  	if (input.tagName === 'SELECT') {
  	if (input.hasAttribute('multiple')) {
  	// Handle <select multiple> elements
  	const selectedOptions = Array.from(input.selectedOptions);
  	const selectedValues = selectedOptions.map(option => option.value);
  	// Check if any selected option has an empty string value
  	if (selectedValues.includes('')) {
  	fieldValue = ''; // Set fieldValue to an empty string
  	}
  	} else {
  	// Handle single-selection <select> elements
  	fieldValue = input.value;
  	}
  	}
  	if (input.hasAttribute('required') && (!fieldValue || !fieldValue.trim())) {
  	// Highlight required fields in red
  	input.style.borderColor = 'red';
  	// Set the flag to indicate custom validation failure
  	customValidationFailed = true;
  	} else {
  	input.style.borderColor = '#555'; // Reset border color
  	}
  	});
  	if (customValidationFailed) {
  	console.log("Validation failed.")
  	alert('Please fill out all required fields.');
  	return; // Exit the function without submitting the form
  	}
  	// If custom validation passes, manually submit the form
  	if (contactForm.reportValidity()) {
  	console.log("Validation passed. Submitting form...");
  	contactForm.submit();
  	}
  	else {
  	console.log("Validation failed. Builtin validation triggered...");
  	}
  	});

• parley/scripts/form.js

  Lines 400 to 429 in b93298b

  	download_html_button.addEventListener('click', () => {
  	// Get inputs to store
  	const formData = {};
  	const inputs = form.querySelectorAll('input, textarea, select');
  	let valid = true;
  	// Log to console
  	console.log("Beginning download validation");
  	inputs.forEach(input => {
  	let fieldValue = input.value;
  	if (input.tagName === 'SELECT' && input.hasAttribute('multiple')) {
  	const selectedOptions = Array.from(input.selectedOptions);
  	// Convert array to string
  	fieldValue = selectedOptions.map(option => option.value).join(', ');
  	}
  	if (input.hasAttribute('required') && (!fieldValue || !fieldValue.trim())) {
  	valid = false;
  	input.style.borderColor = 'red'; // Highlight required fields in red
  	} else {
  	input.style.borderColor = '#555'; // Reset border color
  	}
  	// Store form data
  	formData[input.getAttribute('name')] = fieldValue;
  	});

Solution

Refactor into a single function (e.g. validateForm()).