[Malleys]

Есть ряд переменных

Вы можете взять все элементы вашей формы и с уже ними работать. (Например, const elements = document.querySelector("#form").elements;)

функции onchange все так же не пашут.

Событие change всплывает при изменении поля, вы можете на него подписаться и проверять, правильно ли заполнено поле при его изменении

addEventListener("change", ({ target }) => {
	target.checkValidity();
});

Выберите все элементы, которые вас интересуют и подпишитесь на событие invalid, которое происходит при проверке неправильно заполненного поля.

Не нужно создавать отдельные массивы с описанием, как должны проверятся поля, для этого есть сами поля. Для этого есть CSS-селекторы :valid, :invalid, методы для проверки, событие invalid. Вот пример, составленный на основе вашего описания...

<style>

form {
	max-width: 20em;
	padding: 1em;
	margin: auto;
	font: 1em system-ui;
}
	
form > * {
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
}

input, button, select, textarea { font: inherit; }
	
textarea { resize: vertical; }
	
fieldset {
	border: 1px solid #f1f1f1;
	border-radius: 0.5em;
	flex-direction: row;
}
	
input:not([type]), input[type="tel"], input[type="email"], input[type="date"], input[type="number"], textarea {
	border: none;
	border-radius: 0.5em;
	background: #f1f1f1;
	padding: 0.5em;
}
	
span.error-message {
	padding: 0.5em;
	border-radius: 0.5em;
	color: #F44336;
	font-size: 80%;
	font-weight: bold;
	display: block;
}

:valid + span.error-message {
	display: none;
}
	
</style>

<form>
	<label>
		Фамилия
		<input name="family" required autocomplete="family-name" minlength="1" pattern="\s*\S([\s\S]*\S)?\s*"
			data-custom-validity="Введите свою фамилию!">
	</label>
	
	<label>
		Имя
		<input name="name" required autocomplete="given-name" minlength="1" pattern="\s*\S([\s\S]*\S)?\s*"
			data-custom-validity="Введите своё имя!">
	</label>
	
	<label>
		Телефон
		<input name="phone" type="tel" required autocomplete="tel"
			data-custom-validity="Введите свой номер телефона!">
	</label>
	
	<label>
		Э-почта
		<input name="mail" type="email" required autocomplete="email"
			data-custom-validity="Введите свой Email!">
	</label>
	
	<label>
		Дата отправки
		<input name="date" type="date" required
			data-custom-validity="Введите дату!">
	</label>
	
	<fieldset>
		<legend>Подтверждение</legend>
		<label>
			<input name="check" type="checkbox" required
			data-custom-validity="Подтвердите!">
			Согласен с условиями
		</label>
	</fieldset>
	
	
	<fieldset>
		<legend>Пол</legend>
		<label>
			<input name="radio" type="radio" value="male" required autocomplete="sex"
			data-custom-validity="Выберите свой пол!">
			Мужчина
		</label>
		<label>
			<input name="radio" type="radio" value="female" required autocomplete="sex"
			data-custom-validity="Выберите свой пол!">
			Женщина
		</label>
	</fieldset>
	
	<label>
		Сообщение
		<textarea name="text" required minlength="10" maxlength="1500"
			data-custom-validity="Заполните поле (от 10 до 1500 символов)!"></textarea>
	</label>
	
	<label>
		Год рождения
		<input name="select" type="number" min="1880" max="2001" step="1" required autocomplete="bday-year" size="4"
			data-custom-validity="Введите год рождения (18+)">
	</label>
	
	<button>Отправить</button>
</form>

<script>
	
	addEventListener("change", ({ target }) => {
		target.checkValidity();
	});

	for(const element of document.querySelector("form").elements) {
		element.addEventListener("invalid", event => {
			event.preventDefault();

			for(const label of event.target.labels) {
				for(const errorMessage of label.querySelectorAll(".error-message"))
					errorMessage.remove();

				const errorMessage = document.createElement("span");
				errorMessage.className = "error-message";
				errorMessage.textContent = event.target.dataset.customValidity || event.target.validationMessage;

				label.append(errorMessage);
			}
		});
	}

</script>