{% extends "base.html" %}

{% block content %}
    <h1>Регистрация</h1>
    <form method="post">
      {{ form.as_p}}
      {% csrf_token %}
      <button
          type="submit"
          class="btn btn-primary">
          Регистрация
      </button>
    </form>
{% endblock %}
<script>
    document.querySelector('#id_username').addEventListener('blur', async (event) => {
        const res = await fetch('/validate_username?username=${event.target.value}).then(res => res.json());

        event.target.parentNode.querySelector('.errorList')?.remove();
        const errors = document.createElement('ul');
        errors.classList.add('errorList');
        if (res.is_taken) {
            errors.innerHTML += '<li>Данный логин занят</li>';
        }
        if (event.target.value.length == 0) {
            errors.innerHTML += '<li>Лoгин не может быть пустым</li>';
        }
        const re= new RegExp("^[a-zA-Z0-9-]+$");
        if (!re.test(event.target.value)) {
            errors.innerHTML += '<li>Разрешены только латиница, цифры или тире</li>';
        }
        event.target.parentNode.prepend(errors);
        })
</script>