Показать сообщение отдельно
  #1 (permalink)  
Старый 17.12.2021, 19:59
Новичок на форуме
Отправить личное сообщение для Paulsw01 Посмотреть профиль Найти все сообщения от Paulsw01
 
Регистрация: 02.07.2021
Сообщений: 7

Валидация полей для ввода
Как реализовать что бы при потере фокуса происходила проверка на корректность введённого значения и замена его на корректное при необходимости по следующим правилам:
Из строки значения должны удаляться все символы, кроме допустимых.
Пробелы и дефисы в начале и конце значения должны удаляться.
Несколько идущих подряд пробелов или дефисов должны заменяться на один.
Первая буква должна приводиться к верхнему регистру, а все остальные — к нижнему.

В настоящее время реализован только перевод первой буквы в верхний регистр и запрещен ввод латиницы.

<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)
};
Ответить с цитированием