Как реализовать что бы при потере фокуса происходила проверка на корректность введённого значения и замена его на корректное при необходимости по следующим правилам:
Из строки значения должны удаляться все символы, кроме допустимых.
Пробелы и дефисы в начале и конце значения должны удаляться.
Несколько идущих подряд пробелов или дефисов должны заменяться на один.
Первая буква должна приводиться к верхнему регистру, а все остальные — к нижнему.
В настоящее время реализован только перевод первой буквы в верхний регистр и запрещен ввод латиницы.
<form id="form" onsubmit="return false;">
<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>
let surname = document.getElementById("surname")
let inputName = document.getElementById("name")
let patronymic = document.getElementById("patronymic")
let button = document.getElementById("button")
let form = document.getElementById("form")
let p = document.createElement('p');
let inp = document.querySelector('.validation')
let surnameStr = inp.textContent
function validation(inp) {
inp.addEventListener('input', function () {
this.value = this.value.replace(/[^А-Яа-яЁё -]/g, '')
function changeStr(surnameStr) {
surnameStr.replace(/\s+/g, ' ')
surnameStr.replace(/^([-=\s]*)([a-zA-Z0-9])/gm, "$2")
if (!surnameStr) return surnameStr;
return surnameStr[0].toUpperCase() + surnameStr.slice(1)
}
changeStr()
})
}
validation(surname)
validation(inputName)
validation(patronymic)
document.forms[0].addEventListener('change', function (e) {
if (e.target.tagName = 'INPUT') e.target.value = e.target.value.charAt(0).toUpperCase() + e.target.value.slice(1)
})
button.onclick = function() {
let text = surname.value + ' ' + inputName.value + ' ' + patronymic.value;
p.innerHTML = text;
form.append(p)
};
