Ajax form is processed incorrectly, how to fix the error?

Question

JavaScript

Hello! Need help. There is a JS form handler:

$(document).ready(function () {
    $("form").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        var message = $(formNm).find(".msgs"); // Ищет класс .msgs в текущей форме  и записываем в переменную
        var formTitle = $(formNm).find(".formTitle"); // Ищет класс .formtitle в текущей форме и записываем в переменную
        $.ajax({
            type: "POST",
            url: '/assets/modalform/mail.php',
           // url: '/mail.php',
            data: formNm.serialize(),
            success: function (data) {
                // Вывод сообщения об успешной отправке
                message.html(data);
                formTitle.css("display","none");
                setTimeout(function(){
                    //$(formNm).css("display","block");
                    $('.formTitle').css("display","block");
                    $('.msgs').html('');
                    $('input').not(':input[type=submit], :input[type=hidden]').val('');
                    $('textarea').not(':input[type=submit], :input[type=hidden]').val('');
                }, 9000);
                // $('.remodal-close').click();
            },
            error: function (jqXHR, text, error) {
                // Вывод сообщения об ошибке отправки
                message.html(error);
                formTitle.css("display","none");
                // $(formNm).css("display","none");
                setTimeout(function(){
                    //$(formNm).css("display","block");
                    $('.formTitle').css("display","block");
                    $('.msgs').html('');

                }, 3000);
            }
        });
        return false;
    });
    //для стилей формы
    var $input = $('.form-reviews > input');
    $input.blur(function (e) {
        $(this).toggleClass('filled', !!$(this).val());
    });
    $(".linkButton").click(function() {
        $( "input[name*='formInfo']" ).val($(this).attr( "title" ));
    });
});

The problem is that if the form is not filled out correctly, then all form fields are cleared, although in theory the fields should only be cleared if the form is successfully submitted, what's wrong?
How to make it so that if one of the fields is filled out incorrectly, it is highlighted so that the user understands where the error is?
Glad for any help

Answer 1

success / error callbacks - they are about the Ajax request itself, and not about the correctness of filling out the form.
at you at any successful (ie which reached the server and returned some answer) request the form will be cleared.