@{
    ViewData["Title"] = "Register";
}

<div class="text-center">
    <h2 class="display-4">Регистрация</h2>
</div>
<form id="registerForm" method="post">
    <div class="row">
        <div class="col-4">Имя:</div>
        <div class="col-8">
            <input type="text" name="name" id="name" />
            <span id="nameError" class="text-danger"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-4">Логин:</div>
        <div class="col-8">
            <input type="text" name="login" id="login" />
            <span id="loginError" class="text-danger"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-4">Почта:</div>
        <div class="col-8">
            <input type="email" name="email" id="email" />
            <span id="emailError" class="text-danger"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-4">Пароль:</div>
        <div class="col-8">
            <input type="password" name="password1" id="password1" />
            <span id="password1Error" class="text-danger"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-4">Повтор пароля:</div>
        <div class="col-8">
            <input type="password" name="password2" id="password2" />
            <span id="password2Error" class="text-danger"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-8"></div>
        <div class="col-4"><input type="submit" value="Регистрация" class="btn btn-primary" /></div>
    </div>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('#registerForm').submit(function(event) {
            var name = $('#name').val();
            var login = $('#login').val();
            var email = $('#email').val();
            var password1 = $('#password1').val();
            var password2 = $('#password2').val();
            var isValid = true;

            $('#nameError').text('');
            $('#loginError').text('');
            $('#emailError').text('');
            $('#password1Error').text('');
            $('#password2Error').text('');

            // Валидация имени
            if (name.length < 2 || name.length > 20) {
                $('#nameError').text('Имя должно быть от 2 до 20 символов.');
                isValid = false;
            }

            // Валидация логина
            if (login.length < 5 || login.length > 50) {
                $('#loginError').text('Логин должен быть от 5 до 50 символов.');
                isValid = false;
            }

            // Валидация почты
            var emailPattern = /^[a-zA-Z0-9._-]+@@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            if (!emailPattern.test(email)) {
                $('#emailError').text('Неверный формат почты.');
                isValid = false;
            }

            // Валидация пароля
            if (password1.length < 8 || password1.length > 20) {
                $('#password1Error').text('Пароль должен быть от 8 до 20 символов.');
                isValid = false;
            }

            // Проверка совпадения паролей
            if (password1 !== password2) {
                $('#password2Error').text('Пароли не совпадают.');
                isValid = false;
            }

            if (!isValid) {
                event.preventDefault();
            }
        });
    });
</script>