register_user.html with added client-side validation

{% extends 'base.html' %}
{% load static %}

{% block main_content %}
<div class="login-register-div">
    <div class="login-register-box">
        <h1>MyHoliday</h1>
        <form action="{% url 'register user' %}" method="post" id="register-form">
            <p>
                {{ form.as_p }}
            </p>
            <div class="button-container">
                <button type="submit" class="register-button">Register</button>
            </div>
            {% csrf_token %}
        </form>
    </div>
    <div class="second-option">
        <p>If you have an account click <a href="{% url 'login user' %}">Log in</a>.</p>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('#register-form');
        const passwordInput = document.querySelector('#id_password');

        form.addEventListener('submit', function(event) {
            if (!/(?=.*[a-zA-Z])/.test(passwordInput.value)) {
                alert('The password must contain at least one letter.');
                event.preventDefault();
                return;
            }
            if (!/(?=.*\d)/.test(passwordInput.value)) {
                alert('The password must contain at least one digit.');
                event.preventDefault();
                return;
            }
            if (!/(?=.*_)/.test(passwordInput.value)) {
                alert('The password must contain at least one underscore.');
                event.preventDefault();
                return;
            }
        });
    });
</script>
{% endblock %}