Возврат на место ошибки

Question

У меня в проекте при нажатии на кнопку, если поле пустое возвращает ошибку рядом с этим полем, вопрос в том, как при возникновении ошибки, возвращать клиента именно на место ошибки, а не просто на форму, например если ошибка на поле Номер, должен вернуть на поле номер, если на поле Имя тогда на поле имя, как это можно реализовать?

// Это моя проверка на пустоту 

beforeSend: function() {

  let a = false;

  if (email == '') {
    $("#email_error").show();
    a = true;
  }
  if (firstName == '') {
    $("#firstName_error").show();
    a = true;
  }

  if (phone == '') {
    $("#phone_error").show();
    a = true;
  }
  if (a) return false;
},

<! -- Как выглядит мое поле input и вывод ошибки -->

<input type="tel" class="field interTel datas phone_number" id="phone" name="phone" onkeyup="showOrHideBlock('phone_error','phone')" onchange="showBlock3()">
<strong><small id="phone_error" class="form-text text-" 
                 style="display: none; color: crimson">
                            Вы не указали телефон</small></strong>
<! --  Кнопка -->
<button type="submit" id="sendOrder" class="button button--prime">
                            Рассчитать
                        </button>

Answer 1

У Вас у каждой ошибки есть свой уникальный id, мы можем использовать это для того, чтобы перебрасывать пользователя по якорю к этому id (/#id), либо же использовать jq и функцию scrollTop, которая, как я понимаю, как раз сроллит до нужного элемента. ps: у нее также есть много возможностей, которые легко гуглятся (анимация, скорость прокрутки и т.п.). Вот вариант, который должен моментально скроллить до самой ошибки. Вы можете заменить так, чтобы скролл был не до ошибки, а до самого input, задав ему id (это у Вас уже и так реализовано) и передать этот id в scrollTop. Если все-таки будете делать скролл до самой ошибки, то рекомендую вынести id элемента в отдельную переменную (я это сделал в примере с ошибкой телефона), просто чтобы код был проще редактируемый.

beforeSend: function() {

  let a = false;

  if (email == '') {
    $("#email_error").show();
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#email_error").offset().top
    }, 0);
    a = true;
  }
  if (firstName == '') {
    $("#firstName_error").show();
    $('body').scrollTo('#firstName_error');
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#firstName_error").offset().top
    }, 0);
    a = true;
  }

  if (phone == '') {
    const phoneErrorId = "#phone_error";
    $(phoneErrorId).show();
    $([document.documentElement, document.body]).animate({
        scrollTop: $(phoneErrorId).offset().top
    }, 0);
    a = true;
  }
  if (a) return false;
},

UPD Код для комментария: Возврат на место ошибки

beforeSend: () => { //Заменил на стрелочную функцию. Это не обязательно, но привык юзать их. Тоже советую хотя-бы почитать про них, чтобы не пугаться)
  let a = false;
  let scrollToElement = false; //До какого элемента скроллить, если false - скролла не будет

  if (email == '') {
    const emailErrorId = "#email_error";
    $(emailErrorId).show();
    scrollToElement = scrollToElement === false ? emailErrorId : scrollToElement; //Если в scrollElement записано false, записываем значение emailError, иначе записываем scrollElement (осталяем значение без изменения)
    a = true;
  }

  if (firstName == '') {
    const firstNameErrorId = "#firstName_error";
    $(firstNameErrorId).show();
    scrollToElement = scrollToElement === false ? firstNameErrorId : scrollToElement;
    a = true;
  }

  if (phone == '') {
    const phoneErrorId = "#phone_error";
    $(phoneErrorId).show();
    scrollToElement = scrollToElement === false ? phoneErrorId : scrollToElement;
    a = true;
  }

  if (scrollToElement) { //если в scrollToElement записан какой-то элемент (значение scrollToElement не равно false)
    $([document.documentElement, document.body]).animate({
      scrollTop: $(scrollToElement).offset().top
    }, 0); //скроллим к этому элементу
  }

  return !a; //Если a = true - вернется false, если а = false - вернется true
}

БЛОГ НА HUSL

Возврат на место ошибки

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