Помогите написать скрипт , который бы при потере фокуса на инпуте, проверял его содержимое на правильное количество символов

251
02 августа 2021, 10:30

Сколько символов должно быть в инпуте, указывается в его атрибуте data-length. Если введено подходящее количество, то outline инпута становится зеленым, если неправильное - красным. Для добавления стилей, используй CSS-классы valid и invalid.

#validation-input.valid { 
  outline: 3px solid #4caf50; 
} 
 
#validation-input.invalid { 
  outline: 3px solid #f44336; 
}
<input 
  type="text" 
  id="validation-input" 
  data-length="6" 
  placeholder="Введи 6 символов" 
/>

У меня просто ступор на этом не могу понять даже с чего начать!

Answer 1

document.getElementById("validation-input").onblur = function() { 
  console.log(this.value.length); 
  if (this.getAttribute('data-length') > this.value.length) {  
    this.classList.remove('valid'); 
    this.classList.add('invalid'); 
  } else { 
    this.classList.remove('invalid'); 
    this.classList.add('valid'); 
  } 
};
#validation-input.valid { 
  outline: 3px solid #4caf50; 
} 
 
#validation-input.invalid { 
  outline: 3px solid #f44336; 
}
<input 
  type="text" 
  id="validation-input" 
  data-length="6" 
  placeholder="Введи 6 символов" 
/>

READ ALSO
React получить содержание тега по клику

React получить содержание тега по клику

Допустим, есть 2 дива, в первом текст один, во втором два

271
Утечка памяти при использовании QProcess и SSH

Утечка памяти при использовании QProcess и SSH

Пишу ПО под Linux которое подключается к аналогичным машинам и выполняет простенькие команды а-ля cat /proc/meminfo и подобные выводящие инфу о состоянии...

120
Как отключить оптимизацию в Code Blocks

Как отключить оптимизацию в Code Blocks

Подскажите пожалуйста, как отключить оптимизацию компилятора в среде Code::Blocks?

162
Совместная работа С++ при NodeJS

Совместная работа С++ при NodeJS

Достаточно давно грезил подобными мыслями, и вот настала пора заняться этимИзложу вопрос как серию вопросов по совместной работе C++ при NodeJS

371