Как при выполнении условия сбросить введенное в поле input?

У меня есть инпут с номером телефона. Для него я написал условие: если длинна строки будет больше 13, то одним из условий будет сброс введенной строки, а также изменение цвета строки и добавление текста с указанием ошибки, ну и запрет на отправку формы в БД.

Для сброса я использовал метод reset, но он не работает. Если символов действительно больше 13, то цвет строки меняется на красный, но сброса введенного не происходит. Что я делаю не так?

код html:

<div class="popup__form">
              <input
                type="text"
                name="name"
                class="name popup__form-input popup__form-fields popup__form-fields-1"
                placeholder="Имя"
              />
              <input
                type="tel"
                name="tel"
                class="tel popup__form-input popup__form-fields popup__form-fields-2"
                placeholder="Номер телефона"
              />
              <input
                type="email"
                name="email"
                class="email popup__form-input popup__form-fields popup__form-fields-3"
                placeholder="Почта"
              />
              <button class="popup__form-button">Отправить</button>
            </div>

код jquery:

$(document).ready(function () {
  $("button.popup__form-button").on("click", function () {
    var nameValue = $("input.name").val();
    var telValue = $("input.tel").val();
    var emailValue = $("input.email").val();

    if ($.trim($(".popup__form-fields-1").val()) === "" || $.trim($(".popup__form-fields-2").val()) === "" || $.trim($(".popup__form-fields-3").val()) === "") {
      $('button.popup__form-button').css('background-color','red');
      $('button.popup__form-button').html('Ошибка! Не все поля заполнены');
      return false;
  }

  if ($.trim($(".popup__form-fields-2").length >= 13)) {
    $('.popup__form-fields-2').css('background-color','red');
    $(".popup__form-fields-2").trigger('reset');
    $('.popup__form-fields-2.placeholder').html('Некорректно введен номер телефона');
    return false;
}

    $.ajax({
      method: "POST",
      url: "form.php",
      data: { name: nameValue, tel:telValue, email:emailValue },
      success: function (data) {
        $('button.popup__form-button').css('background-color','green');
        $('button.popup__form-button').html('Успешно!');
      },
      error: function (data){
      }
    })
  
    $("input.name").val();
    $("input.tel").val();
    $("input.email").val();
  });
});

код php:

<?php
  $data = [
    "name" => $_POST['name'],
    "tel" => $_POST['tel'],
    "email" => $_POST['email']
  ];

  $connection = new PDO('mysql:host=localhost;dbname=example01','root', '');
  $sql = 'INSERT INTO users (name, tel, email) VALUES (:name, :tel, :email)';
  $statement = $connection ->prepare($sql);
  $result = $statement->execute($data);
  var_dump($result)
  ?>

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