Неправильно обрабатывается Ajax форма, как исправить ошибку?

Question

[Алексей Веснин]

Всем привет! Нужна помощь. Есть обработчик формы JS:

$(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" ));
    });
});

Проблема в том, что если форма не правильно заполнена, то очищаются все поля формы, хотя по идее поля должны очищаться только в случае успешной отправки формы, что не так?

Как сделать так, чтобы если какое-то из полей заполнено не правильно, его подсвечивать, чтобы пользователь понимал где ошибка?

Рад любой помощи

Comments

[Andreo]

Я упущу вопрос про SetTimeout и спрошу за код ответа, приходящий с сервера. Он случайно не 200?

[Алексей Веснин]

Андрулєс, да 200, суть логики понял=))

Answer 1

[Алексей Яхненко]

success/error колбэки - они про сам аякс запрос, а не про правильность заполнения формы.

у тебя при любом успешном (т.е. который дошел до сервера и вернул какой-то ответ) запросе будет очищаться форма.

Comments

[Алексей Веснин]

С этим понял, а можешь подсказать еще один момент, хочу после отправки формы , скрыть определенный блок, но почему-то не срабатывает, делаю так:

1. В переменную присваиваю класс блока, который хочу скрыть,
2. Далее после отправки запросы вызываю функцию hide(), но не срабатывает

Вот код:

var formBlock = document.getElementById("comments-form");
        $.ajax({
            type: "POST",
            url: '/assets/modalform/mail.php',
            cache: false,
            data: formNm.serialize(),
            success: function (data) {
                // Вывод сообщения об успешной отправке
                message.html(data);
                formTitle.css("display","none");
                setTimeout(function(){

                   formBlock.css("display","none");

                }, 9000);
            },

[Алексей Яхненко]

Алексей Веснин, не вижу здесь hide()

если надо скрывать просто при отправке, то используй beforeSend коллбэк.

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

[Алексей Веснин]

Алексей Яхненко, .hide() уже убрал и написал так, но дело в том, что ни как сейчас, что не через hide, ни прямое обращение к классу не работает

[Алексей Яхненко]

Алексей Веснин, сложно сказать, что там происходит.

попробуй в непонятных ситуациях делать так:
пишешь в нужной строке debugger;, или ставишь брейкпоинт в коде, это примерно равносильно.
выполняешь нужные действия, чтобы начал выполняться скрипт.
скрипт останавливается в брейкпоинте.
смотришь внимательно на стек, скоуп и все прочее.
выполняешь нужный код прямо в консоли хрома.
смотришь на результат.

[Алексей Веснин]

Алексей Яхненко, Спасибо за помощь, уже разобрался. Проблема была в том, что я не правильно получал класс элемента и не правильно пытался его использовать, потом все исправил и стало норм.