Как разрешить в полях только латинские символы?

Question

[sputnickk]

Всем привет! Ребят кто подскажет как корректно разрешить в полях оформления (адрес доставки) только латиницу?

Нашел несколько вариантов:

<input pattern = '[A-Za-z]'>

//или так
onChange={(e) => {
  let value = e.target.value

  value = value.replace(/[^A-Za-z]/ig, '')

  this.setState({
    value,
  })
}}

ну как нацелится на конкретные поля? И оно же при первом обновлении затрется...

Answer 1

[Денис Инешин]

Во первых такую проблему нельзя решить вот так вот наскоком. Нужно выбрать стратегию:

Стратегия А. Не пропускаем не латиницу (т.е. выдаем ошибку каждый раз когда встречаем иные символы)

1. Пишем текстом что нельзя
2. На инпуты навешиваем слушатели, которые предупреждают о не латинице
3. При отправке выдаем ошибку если таки нашли латиницу
4. Сервер тоже проверяет пришла ли только латиница и возвращает ошибку если нет.

Стратегия Б. Тихо фильтруем лишние символы (никакие ошибки не показываются)

1. Тихо стираем при вводе текста
2. Удаляем не латинские части при отправке формы
3. На сервере проверяем и тоже удаляем лишнее

В обоих случаях вам нужно сделать 3 вещи:

1. На стороне клиента проверять инпуты при вводе. Для этого вам поможет событие onInput
2. При отправке формы тоже нужно проверить, для этого нужно найти все инпуты и снова вызвать проверочную функцию
3. Ну и на сервере тоже добавить проверку, мало ли каким образом отправились данные.

Функция на стороне клиента может выглядеть как то так:

function deleteNonLatin (text) {
  return text.replace(/[^A-Za-z]/ig, '');
}

// чтобы выполнить эту функцию, вам нужно навесить событие на инпут(ы)
const myInput = document.querySelector('.myInput');
myInput.addEventListener('input', (e) => {
  const cleanValue = deleteNonLatin(e.target.value);
  e.target.value = cleanValue;
});

Comments

[sputnickk]

направления я понял, спасибо, буду пробовать