Почему не работает валидация поля формы?

Question

[helpmeplease196]

Как задумано - если в поле "Имя" ничего не указано - фоновый цвет должен стать красным (по факту ничего не происходит).
Обычно проверяю каждый новый этап, так легче понять где ошибка. Тут делала чисто по примеру (https://www.youtube.com/watch?v=PqTrhfjLQBI&t=1890s). И не могу понять где ошибка. Отбражается форма корректно, но валидация не работает.

Заранее спасибо, если кто-то поможет

<div class="form">
  <form action="#" id="form" class="form_body">
    <h1 class="form_title">Прошу перезвонить</h1>
    <div class="form_item">
      <label for="form_name" class="form_label">Имя</label>
      <input type="text" name="name" id="form_name" class="form_input _reg">
    </div>
    <div class="form_item">
      <label for="form_email" class="form_label">Email</label>
      <input type="text" name="email" id="form_email" class="form_input _reg _email">
    </div>
    <div class="form_item">
      <label for="form_phone_num" class="form_label">Номер телефона</label>
      <input type="text" name="phone_num" id="form_phone_num" class="form_input _reg">
    </div>
    <div class="form_item">
      <label for="form_massage" class="form_label">Сообщение</label>
      <textarea name="massage" id="form_massage" class="form_input"></textarea> 
    </div>
    <div class="form_item">
      <div class="checkbox">
        <input type="checkbox" name="check" class="checkbox_input _reg " id="form_checkbox">
        <label for="form_checkbox" class="checkbox_label"> напишите на what's up</label>
      </div>
    </div>
    <button type="submit" class="form_button">отправить</button>
  </form>
</div>

.form {
    max-width: 550px;
    margin: 0px auto;
    padding: 30px;
   }


.form_title  {                   
   font-size: 30px;
font-weight: 700px;
}
.form_item {
  margin-bottom: 20px;
  
 }
.form_label {
font-size: 18px;
display: block;

 }
.form_input { 
height: 50px;
border-radius: 5px;
width: 100%;
}

.form_input._error{
  background-color: red;
}

textarea.form_input{
  min-height: 120px;
  resize: vertical;
}

.checkbox { }
.checkbox_input {
  display: none;
 }
 
.checkbox_label {
  font-size: 16px;
  line-height: 140%;
  display: inline-flex;
  align-items: center;
 
 }

 .checkbox_label::before{
  content: "";
  flex: 0 0 24px;     /*?????????????????????????*/
  height: 24px;
  background-color: blue;
  border-radius: 4px;
  align-self: flex-start;
  margin: 0px 10px 0px 0px;
 }
 .checkbox_label::after{
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  background-color: aqua;
  margin-left: 4px;
  margin-bottom: 19px;
 }

"use strict"

document.addEventListener("DOMContentLoaded", function(){


const form = document.getElementById('form');
form.addEventListener('submit', formsend)

async function formsend (e) {
    e.preventDefault();
    let error = formvalidate(form)
}

function formvalidate(form){
let error = 0;
let formreq = document.querySelectorAll("._reg")

for(let index=0; index<formreq.length; index++){
   const input =  formreq[index];
   formRemoveError(input)
   
if(input.value === " "){
    function formAddError(input);
    error++
}
}}

function formAddError(input){
 input.parentElement.classlist.add("error");
 input.classlist.add("error")
}

function formRemoveError(input){
    input.parentElement.classlist.remove("error"); 
    input.classlist.remove("error");
}

});

Comments

[thak]

1. Не правильно указано свойство classlist. Правильно classList.
2. function formAddError(input); - так функция не вызывается. Нужно убрать function
3. Нужно определить с классом error. В js добавляется/удаляется класс error. А в css стиль задаётся классу _error

[helpmeplease196]

thak, спасибо.
Но ведь и в css и в js запись "_error" одинакова. Разве нет ?

input.classList.remove("_error")
.form_input._error

Answer 1

[Арамаис Мирзоян]

1. Нужно убрать function отсюда
function formAddError(input);
2. Везде заменить classlist на classList
3. Здесь убрать пробел, это проверка на пустую строку.

//Было
if(input.value === " "){
    function formAddError(input);
    error++
}
//Стало
if(input.value === ""){
    function formAddError(input);
    error++
}

4. Добавить класс error

.error {
   background-color: red;
 }

Исправленный пример можете посмотреть здесь

Comments

[helpmeplease196]

Спасибо все работает.
Только хочу уточнить один момент.
В этой строке объявляется функция:
function formAddError(input){

В этой части (input) просто аргумент функции, как я понимаю, тут же можно поставить любой знак, букву.
Далее функция вызывется и указывается нужное значение - указываем имя переменной input.
Но в данном случае, если пишу что то кроеме input - код уже не работает. Почему?

[Арамаис Мирзоян]

helpmeplease196, внутри функции вы можете изменить input на любое другое слово, но главное и в теле функции переименовать все переменные.

А во время вызова функции почему не работает. Потому что вы передаете в функцию константу input, которая объявлена выше.

const input = formreq[index];

Если вы переименуете константу, везде, где она используется, внутри функции formvalidate, всё будет работать. Смотрите пример

Answer 2

[Semantic.Moscow]

чтобы упростить себе задачу, нужно использовать валидацию формы и на стороне клиента,
JS для этого не требуется!

1. используйте для input соответствующие типы!
type="email",
type="tel"
2. используйте maxlength для ограничения длины строки в поле
3. используйте атрибут placeholder для подсказок
4. используйте атрибут pattern для проверки введённых данных
4.1 для указания ошибки ввода есть псевдоклассы :valid, :invalid и :out-of-range
которые и нужно дёргать если pattern не совпал.
ну и конечно не забывать про атрибут required

Comments

[helpmeplease196]

Спасибо)