Не получается выполнить валидацию формы ,не могу понять что не так.(

Question

Пытаюсь сделать валидацию формы. Чтобы при отсутствии символов возникала ошибка, не понимаю в чем проблема. А ещё хочу сделать функцию на кнопку на стирание элементов в инпутах. Помогите пожалуйста

let contactform = document.querySelector('.contactinfo');
let name = contactform.querySelector('#contactname');
let mail = contactform.querySelector('#contactmail');
let callnumber =contactform.querySelector('#contactnumber');
let message = contactform.querySelector('#contactmessage');
let contactbtn = contactform.querySelector('#contackbtn');

contactform.addEventListener('submit',function(event){
    event.preventDefault();
    console.log('name: ',name.value);
    console.log('mail: ',mail.value);
    console.log('callnumber: ',callnumber.value);
    console.log('message : ',message.value);
})

let  contactfields = contactform.querySelectorAll('.form-control');

contactform.addEventListener('button', function (event) {
  event.preventDefault()
  removeValidation();
  for (let i = 0; i < contactfields.length; i++) {
    if (!contactfiels[i].value) {
      console.log('Заполните поля!', form-control[i]);
      let error = generateError('Заполните поля!!!');
      contactfields[i].parentElement.insertBefore(error, contactfields[i]);
      contactfields[i].style.border = '1px solid red';
    }
  }
})
contactclearbtn
let clearValue = function(event){
  let cleanstr = contactform.querySelectorAll('#contactclearbtn');
   for (let i = 0; i < cleanstr.length; i++) {
    if (!cleanstr[i].value) {
      console.log('Ничего не написано',cleanstr[i]);

    }else{

    }
   
  } 
}

.form-row{
    margin-top: 20px;
    width: 100%;
  } 

  .form-row textarea{
    height: 200px;
    padding: 10px;
  }
  .form-row button{
    height: 50px;
    margin-top: 100px;
    margin-left: 25px;
  
  }
   
  .form-control {
      height: 40px;
    padding: 10px;
    background-color:#272c30;
    color: #fff;
    border: 1px solid #fff ; 
  }
  .form-control:focus{
    outline: none;
     border: 1px solid #63ADD0; 
     box-shadow:none;
     background-color: #272c30;
    }
    .form-control::placeholder {
      color:#fff;
      font-size: 1.2em;
      /* text-align: center;
       */
    }
.knopki{
   margin-top:60px; 
}
.btn{
color:#191919;

}
.btn:hover{
color: #272c30;
background-color:#63ADD0;
border:none;
box-shadow: none;
}

  .col {
    width: 100%;
    text-align: center;
  }

<form class="contactinfo">
      <div class="container">
        <div class="row justify-content-center">
          <h4>СВЯЗАТЬСЯ С НАМИ </h4>
        </div>
        <div class="form-row ">
          <div class="col col-xs-12 col-sm-12 col-md-4 ">
            <input id="contactname" type="text" class="form-control" placeholder="Имя:">
          </div>
          <div class="col col-xs-12 col-sm-12 col-md-4 ">
            <input id="contactmail" type="text" class="form-control" placeholder="E-mail:">
          </div>
          <div class="col col-xs-12 col-sm-12 col-md-4 ">
            <input id="contactnumber" type="text" class="form-control" placeholder="Номер телефона:">
          </div>
          <div class="row justify-content-center">
            <div class="col col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <textarea id="contactmessage" type="text" class="form-control" placeholder="Сообщение:" style="margin-top: 20px;"></textarea>
            </div>
          </div>
        </div>
        <div class="row justify-content-center knopki">
          <div class="col-md-2 text-center">
            <input type="submit" id="contactbtn" class="btn btn-light btn-lg btn" href="#">
          </div>
          <div class="col-md-2 text-center">
            <button type="button"  id="contactclearbtn"class="btn btn-light btn-lg btn">Стереть</button>
          </div>



        </div>
    </form>

Answer 1

Вы ошиблись в названии события. У формы есть событие 'submit', а не 'button'. В первом случае вы выводите в консоль по этому событию, там же должна быть проверка.

Для стирания есть тип кнопки reset, для этого скрипт не нужен:

<button type="reset">Стереть</button>

Или если нужно скриптом, то contactform.reset()

Вот переделанный ваш код:

let contactform = document.querySelector('.contactinfo');
let name = contactform.querySelector('#contactname');
let mail = contactform.querySelector('#contactmail');
let callnumber = contactform.querySelector('#contactnumber');
let message = contactform.querySelector('#contactmessage');
let contactbtn = contactform.querySelector('#contackbtn');
let contactfields = contactform.querySelectorAll('.form-control');

contactform.addEventListener('submit', function(event){
    // логирование
    console.log('name: ', name.value);
    console.log('mail: ', mail.value);
    console.log('callnumber: ', callnumber.value);
    console.log('message : ', message.value);
  
    // валидация
    for(let i = 0; i < contactfields.length; i++){
        let field = contactfields[i];
        if(!field.value){
            event.preventDefault(); // запрещаем отправку только если не валидно
            console.log('Заполните полe!', field);
            let error = generateError('Заполните поля!!!');
            contactfields[i].parentElement.insertBefore(error, contactfields[i]);
            contactfields[i].style.border = '1px solid red';
        }
    }
})

.form-row {
    margin-top: 20px;
    width: 100%;
}

.form-row textarea {
    height: 200px;
    padding: 10px;
}

.form-row button {
    height: 50px;
    margin-top: 100px;
    margin-left: 25px;

}

.form-control {
    height: 40px;
    padding: 10px;
    background-color: #272c30;
    color: #fff;
    border: 1px solid #fff;
}

.form-control:focus {
    outline: none;
    border: 1px solid #63ADD0;
    box-shadow: none;
    background-color: #272c30;
}

.form-control::placeholder {
    color: #fff;
    font-size: 1.2em;
    /* text-align: center; */
}

.knopki {
    margin-top: 60px;
}

.btn {
    color: #191919;
}

.btn:hover {
    color: #272c30;
    background-color: #63ADD0;
    border: none;
    box-shadow: none;
}

.col {
    width: 100%;
    text-align: center;
}

<form class="contactinfo">
    <div class="container">
        <div class="row justify-content-center">
            <h4>СВЯЗАТЬСЯ С НАМИ </h4>
        </div>
        <div class="form-row ">
            <div class="col col-xs-12 col-sm-12 col-md-4 ">
                <input id="contactname" type="text" class="form-control" placeholder="Имя:">
            </div>
            <div class="col col-xs-12 col-sm-12 col-md-4 ">
                <input id="contactmail" type="text" class="form-control" placeholder="E-mail:">
            </div>
            <div class="col col-xs-12 col-sm-12 col-md-4 ">
                <input id="contactnumber" type="text" class="form-control" placeholder="Номер телефона:">
            </div>
            <div class="row justify-content-center">
                <div class="col col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <textarea id="contactmessage" class="form-control" placeholder="Сообщение:" style="margin-top: 20px;"></textarea>
                </div>
            </div>
        </div>
        <div class="row justify-content-center knopki">
            <div class="col-md-2 text-center">
                <button class="btn btn-light btn-lg btn">Отправить</button>
            </div>
            <div class="col-md-2 text-center">
                <button type="reset" class="btn btn-light btn-lg btn">Стереть</button>
            </div>
        </div>
    </div>
</form>

БЛОГ НА HUSL

Не получается выполнить валидацию формы ,не могу понять что не так.(

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