Проверка поля на пустоту

Я пытаюсь сделать проверку полей на пустоту без обновления страницы - c помощью AJAX. Но мне говорит, что переменные для вывода ошибок не определены, хотя они в обработчике формы определены. Почему так?

HTML:

1. <form method="POST" id="registration" action="registration.php">
2.            <input type="text" name="login" placeholder="Логин">
3.            <div class="error"><?php echo($loginErr)?></div>
4.            <input type="text" name="password" placeholder="Пароль">
5.            <div class="error"><?php echo($passwordErr)?></div>
6.            <input type="text" name="email" placeholder="Email">
7.            <div class="error"><?php echo($emailErr)?></div>
8.             <input type="submit" value="Зарегистрироваться" id="insert">
9.           </form>

Код (CSS):

1.   input {
2.  
3.     padding: 4px;
4.     margin: 5px;
5.    
6.     }

Код (Javascript):

1. $(document).ready(function(){
2.  
3.     let form = $('.registration');
4.     form.submit(function(e) {
5.      
6.         e.preventDefault();
7.  
8.  
9.         $.ajax({
10.             url: form.attr('registration.php'),
11.             type: form.attr('POST'),
12.             dataType: 'html',
13.             data: form.serialize(),
14.             success: function(result) {
15.              
16.                 $('#error').html(result);
17.             }
18.         });
19.     });
20. });

PHP:

1. <?php
2.  
3.     $loginErr = $passwordErr = $emailErr = "";
4.  
5.     if(empty($_POST["login"])) {
6.         $loginErr = "Поле не может быть пустым";
7.     }
8.  
9.     if(empty($_POST["password"])) {
10.         $passwordErr = "Поле не может быть пустым";
11.     }
12.  
13.     if(empty($_POST["email"])) {
14.         $emailErr = "Поле не может быть пустым";
15.     }
16.  
17. ?>

 

спасибо

 

спасибо!