Как сделать валидацию того что введено в input?

Question

В HTML есть несколько тегов input (name, surname, age и тд.).

Задача с помощью JS определить, если в name символы кроме букв (цифры, например). Если да то выделить этот input красным.

И соответственно если в age есть буквы, то тоже выделить поле красным.

Я перебрал массив с содержимым name & surname и организовал цикл:

var input_a = document.getElementsByClassName('name_surname'))

но у меня видимо в условии что то неправильно.

Можете подсказать как выглядит условие по нахождению цифр в input, и как выделить этот input красным?

Answer 1

Можете подсказать как выглядит условие по нахождению цифр в input и как выделить его красным?

Пример, от которого Вы можете оттолкнуться:

const input = document.querySelector("input")
const button = document.querySelector("button")

const handleInput = () => {
  input.style.background = ""
}

const handleClick = () => {
  handleInput()
  const value = input.value.trim()
  if (!/^[a-zA-Z\s]*$/.test(value)) {
    input.style.background = "red"
  } else {
    console.log("Все ОК, имя содержит только буквы латинского алфавита")
  }
}

button.addEventListener("click", handleClick)

// следует ограничить частоту вызовов
// добавив условие при котором вызов
// handleInput будет обрабатываться
input.addEventListener("input", handleInput)

<input name="name" />
<button>Валидировать</button>

Answer 2

https://regex101.com/

/^[a-zа-яё ]+$/i — Начало строки ^, конец строки $, только буквы в интервале от [a-z, а-я или пробел], + один или много совпадений. Флажок i - insensitive, чтобы учитывать и маленькие, и большие буквы.

/^\d+$/ — только цифры (digit)

document.getElementById("name").addEventListener("input", function() {
  this.style.borderColor = /^[a-zа-яё ]+$/i.test( this.value.trim() ) ? "" : "red";
});

document.getElementById("age").addEventListener("input", function() {
  this.style.borderColor = /^\d+$/.test( this.value.trim() ) ? "" : "red";
});

input { border: 2px solid #999; outline: none; }

<input id="age" placeholder="Возраст">
<input id="name" placeholder="Имя">

БЛОГ НА HUSL

Как сделать валидацию того что введено в input?

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