Как адаптировать ошибку валидации к разным размерам экрана?

Question

[Антон Нестеренко]

Всем доброго времени суток! Подскажите пожалуйста как обратится к размеру экрана чтобы изменить положение ошибок валидатора через плагин validate.js ?

$("#modal3-form").validate({
    rules: {
      user_name: {
        required: true
      },
      user_email: {
        required: true,
        email: true
      }
    },
    messages: {
      user_name: {
        required: "Пожалуйста, укажите ваше имя"
      },
      user_email: {
        required: "Для связи с вами нам необходим ваш e-mail",
        email: "Пожалуйста, введите корректный e-mail"
      }
    },
    submitHandler: function (form) {
      $.ajax({
        url: 'mail.php',
        type: 'POST',
        data: $('#modal3-form').serialize(),
        success: function (data) {
          $('form input[type="text"], form textarea').val('');
          $('.modal2').fadeIn();
        },
        // error: function (data) {
        // $('.final-title').hide();

        // }
      })
    },
    invalidHandler: function (form) {
      $.ajax({
        success: function (data) {
          $("label").animate({
            "top": "-=5px"
          }, {
            duration: 100
          });
          $("label").animate({
            "top": "+=5px"
          }, {
            duration: 100
          });
          $("label").animate({
            "top": "-=5px"
          }, {
            duration: 100
          });
          $("label").animate({
            "top": "+=5px"
          }, {
            duration: 100
          });
          // $("input:required").css("border-color", "red");
        }
      })
    }

мне нужно редактировать часть где указаны положения ошибок в invalidHandler .
Помогите пожалуйста!

Answer 1

[S-a-n-d-r-0]

объявить до всего этого кода глобальную переменную.
Например, let myOffset = 5;
В invalidHandler вместо "top": "+=5px" писать "top": "+=" + myOffset + "px"
После всего этого кода дописать что-нибудь типа

$(window).on('load resize', function() {
    if (window.innerWidth <= 544) {
        myOffset = 5; //мобильный
        return;
    }
    if (window.innerWidth <= 768) {
        myOffset = 10; //планшет
        return;
    }

    myOffset = 14; //большой экран
});

чтобы менять свою глобальную переменную при изменении размера экрана/при загрузке

Answer 2

[Антон Нестеренко]

спасибо за ответы, но я провтыкал что менять нужно label в css, а не анимацию в js.
но на будущее буду знать, спасибо!

Answer 3

[profesor08]

Пользуйся библиотеками для определения текущего размера экрана, либо вручную (window.innerWidth, window.mathchMedia)
https://www.npmjs.com/package/js-media-query