voraa,
а так? )))
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const form = document.getElementById("form");
const inputs = Array.from(form.querySelectorAll(".validation"));
const err = "Не все поля заполнены правильно!";
function validation(input) {
let txt = input.value.trim();
let reg = /(^[^А-Яа-яЁё]+)|([^А-Яа-яЁё]+$)/g;
txt = txt.replace(reg, '');
reg = /[-\s]+/g;
txt = txt.replace(reg, ([a, ...b]) => a);
reg = /[^А-Яа-яЁё\s-]/g;
txt = txt.replace(reg, '');
txt = txt.toLowerCase();
reg = /^./;
txt = txt.replace(reg, a => a.toUpperCase());
if (txt !== input.value) input.value = txt;
return !!txt.length;
}
form.addEventListener("focusout", function({target}) {
if (target = target.closest(".validation")) validation(target)
})
function validateAll()
{
let validate = inputs.every(validation);
return validate
}
function personality()
{
let txt = inputs.map(({ value }) => value).join(" ");
return txt
}
form.addEventListener("submit", function(event) {
event.preventDefault();
let validate = validateAll();
if(validate) {
let txt = personality();
out.insertAdjacentHTML('beforeend', `<li>${txt}</li>`);
form.reset();
}
else attention.innerHTML = err;
})
form.addEventListener("input", function({target}) {
if (target = target.closest(".validation") && attention.innerHTML === err) attention.innerHTML = "";
})
});
</script>
</head>
<body>
<form id="form">
<input type="text" class="validation" id='surname' placeholder="Фамилия" />
<input type="text" class="validation" id='name' placeholder="Имя" />
<input type="text" class="validation" id='patronymic' placeholder="Отчество" />
<button id="button" class="btn btn-success">Отправить</button>
</form>
<div id="attention"></div>
<ul id="out"></ul>
</body>
</html>