Баг с классом label'а при обновлении страницы с формой

Question

Пишу часть авторизации на сайте, и js код работает нормально, но при обновлении странички с формой введённые значения остаются, а js не добавляет класс на label для input с введённым значением. Я больше бекендер, поэтому я надеюсь вы тыкните меня носом, что не так :D

Нормальное состояние формы:

Баг при обновлении:

Часть html формы:

<form id="signin-form" action="" method="POST" class="form form-sign_in" value="sign_in">
    {% csrf_token %}
    <div class="form-group">
         <label for="">Username<span class="req">*</span></label>
         {{ sign_in_form.username }}
    </div>
    <div class="form-group">
         <label for="">Password<span class="req">*</span></label>
         {{ sign_in_form.password }}
    </div>
    <button class="form-button" type="submit" name="submit" value="sign_in">Sign in</button>
</form>

js код (jquery, потому что в основном брал с интернета):

$('.form').find('input, textarea').on('keyup blur focus', function (e) {

var $this = $(this),
    label = $this.prev('label');

if (e.type === 'keyup') {
    if ($this.val() === '') {
        label.removeClass('active highlight');
    } else {
        label.addClass('active highlight');
    }
} else if (e.type === 'blur') {
    if ($this.val() === '') {
        label.removeClass('active highlight');
    } else {
        label.removeClass('highlight');
    }
} else if (e.type === 'focus') {
    if ($this.val() === '') {
        label.removeClass('highlight');
    } else if ($this.val() !== '') {
        label.addClass('highlight');
    }
}

});

$('.tab a').on('click', function (e) {

    e.preventDefault();

    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');

    target = $(this).attr('href');

    $('.tab-content > div').not(target).hide();

    $(target).fadeIn(600);
});

UPD: На всякий случай ещё вот css:

label {
    position: absolute;
    transform: translateY(6px);
    color: rgba(256, 256, 256, 0.6);
    left: 13px;
    transition: all 0.25s ease;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    font-size: 22px;
}

label .req {
    margin: 2px;
    color: #1ab188;
}

label.active {
    transform: translateY(42px);
    left: 2px;
    font-size: 14px;
}
label.active .req {
    opacity: 0;
}

label.highlight {
    color: #ffffff;
}

input,
textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

input:focus,
textarea:focus {
  outline: 0;
  border-color: #1ab188;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}

Answer 1

Вот так приблизительно выглядит проверка заполненных импутов для вашего случая:

document.addEventListener('DOMContentLoaded' , checkInputs);
function checkInputs(){
  inputs = [...document.querySelectorAll('input')];
  inputs.forEach((input, i) => {
   input.value ? input.closest('.req').classList.remove('active', 'highlight'):
                  input.closest('.req').classList.add('active', 'highlight'); 
  });

}

БЛОГ НА HUSL

Баг с классом label'а при обновлении страницы с формой

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