Paulsw01,
<!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");
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)
})
let timer;
form.addEventListener("submit", function(event) {
event.preventDefault();
let inputs = Array.from(this.querySelectorAll(".validation"));
let validate = inputs.every(validation);
let txt = "Не все поля заполнены правильно!"
if (validate) txt = inputs.map(({
value
}) => value).join(" ");
out.innerHTML = txt;
window.clearTimeout(timer);
if (!validate) timer = window.setTimeout(_ => out.innerHTML = "", 10000)
})
});
</script>
</head>
<body>
<p id="out"></p>
<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>
</body>
</html>