Форма авторизации HTML&PHP в модальном окне

118

15 марта 2021, 21:10

Есть форма с авторизацией. Когда вводим логин и пароль которые не содержаться в СУБД, то страница просто обновляется. Это можно было бы сделать намного проще, но вот форма находится в модальном окне. Т.е. если делать проверку уже в php файле, тогда только при нажатии на кнопку авторизации срабатывает файл php и выводит сообщении об ошибке. Дык в чем суть, можно ли сделать проверку на существование пользователя прямо в HTML, ну или на крайняк в js? Спасибо.

Answer 1

Используйте ajax

Делаем отдельный обработчик для авторизации auth.php

$errors = [];
if (!authUser($login, $pass)) { // некий метод для авторизации
    $errors[] = 'Ошибка авторизации';
}
// тут мы либо рендерим форму авторизации с учетом ошибки
return render($errors);
// или возвращаем только ошибки
return json_encode($errors);

Делаем обработчик формы в js

$('.auth-form').on('submit', function(e){
    e.preventDefault(); // чтоб страница не обновилась
    var form = $(this);
    $.ajax({
        url: form.attr('action'),
        data: form.serialize(),
        success: function(response){
            // если это html
            $('.form-container').html(response);
            // если это json
            $('.errors', form).html(''); // чистим ошибки
            if (response.errors) {
                for(var i=0; i<response.errors.length; i++) {
                   $('.errors', form).append('<p>'+response.errors[i]+'</p>');
                }
            } else {
                // ошибок нет, скорее всего нас авторизовали
                // можно просто перезагрузить страницу
                location.href = location.href;
            }
        }
    });
});