Ввод слов в input на английском или русском в зависимости от условия

Question

Имеется input. Если при клике значение div===RU, то можно вводить любые слова на русском(строчный и заглавный регистр), включая пробелы и дефис в input.
Если при клике значение div===ENG, то можно вводить любые слова на английском(строчный и заглавный регистр), включая пробелы и дефис.
В ином случае, к примеру, если пустая строка или иной символ alert('Введите корректное знач.'). Пробовал через регулярки, но в них слабоват.

const input = document.querySelector('.city')
const button = document.querySelector('.find')
const div = document.querySelector('.lang')

div.addEventListener('click', function(event){
  if(div.innerHTML === 'Ru'){
    div.innerHTML ='Eng'
  }
  else{
    div.innerHTML = 'Ru'
  }
})

button.addEventListener('click', getCity)

function getCity(event){
  event.preventDefault()
  if(input.value ==='' || input.value.replace(/[^\d]/g,'')){
     alert('Введите корректное значение')
}
  else if(div.innerHTML==="Ru" && input.setAttribute("pattern", "^[А-Яа-яЁё\s]+$")){
    console.log('вводим русский символы')
  }
   else if(div.innerHTML==="Eng" && input.setAttribute("pattern", "^[a-zA-Z]+$")){
    console.log('вводим английские символы')
  }
}

<input type="text" class="city js" placeholder="Введите название города" name="city"> 
<button class='find'>find</button>
<div class='lang'>Ru</div>

Answer 1

Похоже, что Вы хотели реализовать такую логику:

const oCity = document.querySelector('.city');
const oFind = document.querySelector('.find');
const oLang = document.querySelector('.lang');
const oError = document.querySelector('.error');

oLang.addEventListener('click', switchLang);
oCity.addEventListener('input', checkVal);
oFind.addEventListener('click', getCity);

function switchLang() {
  if (oLang.innerHTML === 'Ru') {
    oLang.innerHTML = 'Eng';
    oCity.setAttribute("pattern", "^[a-zA-Z -]+$");
  } else {
    oLang.innerHTML = 'Ru';
    oCity.setAttribute("pattern", "^[А-Яа-яЁё -]+$");
  }
  checkVal();
}

function checkVal() {
  if (!oCity.checkValidity()) {
    if (oCity.value == '') {
      oError.innerText = (oLang.innerHTML === 'Ru') ? 'Введите название города' : 'Input the name of the city';
    } else {
      oError.innerText = (oLang.innerHTML === 'Ru') ? 'Вводите только русские символы' : 'Input latin character only';
    }
  } else {
    oError.innerText = '';
  }
}

function getCity(event) {
  event.preventDefault();
  if (!oCity.checkValidity()) {
    alert('Введите корректное значение');
  } else {
    alert(`Город ${oCity.value} ждёт Вас!`);
  }
}

input.city:invalid { outline: 2px solid red; } div.error { height: 1em; color: red; }

<input type="text" class="city js" placeholder="Введите название города" name="city" pattern="^[А-Яа-яЁё\s-]+$">
<button class='find'>find</button>
<div class="error"></div>
<div class='lang'>Ru</div>

БЛОГ НА HUSL

Ввод слов в input на английском или русском в зависимости от условия

Ответы (1 шт):