в таблицу пользователей добавить строку по вновь созданному пользователю

[In4eg]

Всем привет!
Очень нужна помощь!
Есть форма:
<form method="post" ENCTYPE="multipart/form-data">
<label for="name">Имя</label>
<input required id="name" type="text" name="login" placeholder="Ваше имя" >
<br>
<label for="mail">Email</label>
<input required id="mail" type="text" name="email" placeholder="Ваша почта">
<br>
<label for="login">Login</label>
<input required id="login" type="text" name="login" placeholder="Ваш login">
<br>
<label for="password">Password</label>
<input required id="password" type="text" name="password" placeholder="Ваш password">
<br>
<input type="submit" value="Зарегистрироватся">
</form>

И таблица:
<table id="catTable">
<thead>
<tr><th>Имя</th><th>Логин</th><th>Email</th></tr>
</thead>
<tbody>
<tr><td id="catName"></td><td id="catLogin"></td><td id="catMail"></td></tr>
</tbody>
</table>

если по нажатию на кнопку "Оправить" в форме не было обнаружено ни одной ошибки в полях ввода, то на основании этих данных средствами JS (JQUERY)в таблицу пользователей добавить строку по вновь созданному пользователю, а поля регистрации очистить и привести
в исходное состояние.

Форма и таблица находятся на одной странице.

Целый день ломаю голову - ничего не получается. Пожалуйста, поделитесь идеями!
Спасибо!

[Lemme]

Если другие проверки не нужны (если будут только HTML5), то убери все, что связано с error

// добавь id форме myForm
var myForm = document.getElementById("myForm");

// либо name, но тогда используй так:
// (myForm - это имя)
// var myForm = document.forms.myForm;

myForm.onsubmit = function(e) {
    // по умолчанию ошибок нет.
    var error = false;
    
    // поля таблицы
    var catName = document.getElementById('catName'),
        catLogin = document.getElementById('catLogin'),
        catMail = document.getElementById('catMail');
    
    /* 
    if (!this.name.value) {
    	error = true;
    }
    */
    
    // если ошибки, то
    if (error) return false; 
    
    // иначе
    
    // записываем данные в таблицу
    catName.innerHTML = this.name.value;
    catLogin.innerHTML = this.login.value;
    catMail.innerHTML = this.email.value;
    
    // сбрасываем форму
    this.reset();
    
    // а это, чтоб форма не отправлялась.
    e.preventDefault();
};

[In4eg]

Спасибо ОГРОМНОЕ!

Поля в таблицу записались, все отлично, но вот при создании следующего пользователя предыдущая строка стирается и новый не добавляется после предыдущего, а записывается на его место.

[Lemme]

Это убери.

<tr><td id="catName"></td><td id="catLogin"></td><td id="catMail"></td></tr>

myForm.onsubmit = function(e) {

    // чтоб форма не отправлялась.
    e.preventDefault();

    // Элементы таблицы
    var tbody = document.querySelector('#catTable tbody'),
        tr = document.createElement('tr');
    
    // создаем td
    var catName = document.createElement('td'),
        catLogin = document.createElement('td'),
        catMail = document.createElement('td');
    
    // записываем в td
    catName.innerHTML = this.name.value;
    catLogin.innerHTML = this.login.value;
    catMail.innerHTML = this.email.value;
    
    // добавляем их в tr
    tr.appendChild(catName);
    tr.appendChild(catLogin);
    tr.appendChild(catMail);
    
    // а теперь добавляем tr в tbody
    tbody.appendChild(tr);
    
    // сбрасываем форму
    this.reset();
};

[In4eg]

Lemme, огромнейшое спасибо!