Question

I’m validating and posting form data via ajax with code below.

The problem is, it doesn’t break posting if during validation occured an error. Here is my code

var autoSaveInterval = null;
var counter = 0;

function call() {
    postViaAjax(true)
}

function postViaAjax(autosaveMode) {
    var name = $("#name").val();
    var title = $("#title").val();
    var menu = $("#menu").val();
    var parentcheck = $(".parentcheck:checked").val();
    var id = $("#id").val();
    var author_id = $("#author_id").val();
    if (parentcheck == 0) {
        var parent = parentcheck;
    } else {
        var parent = $("#parent").val();
    }
    var content = CKEDITOR.instances['content'].getData();
    content = encodeURIComponent(content);
    var dataString = 'name=' + name + '&title=' + title + '&menu=' + menu + '&parentcheck=' + parentcheck + '&id=' + id + '&parent=' + parent + '&content=' + content + '&author_id=' + author_id;
    $.ajax({
        type: "POST",
        url: "processor/dbadd.php",
        data: dataString,
        dataType: "json",
        success: function (result, status, xResponse) {
            var message = result.msg;
            var err = result.err;
            var now = new Date();
            if (message != null) {
                if (autosaveMode) {
                    $('#submit_btn').attr({
                        'value': 'Yadda saxlanıldı ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds()
                    });
                } else {
                    $.notifyBar({
                        cls: "success",
                        html: message + ' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds()
                    });
                }
            }
            if (err != null) {
                $.notifyBar({
                    cls: "error",
                    html: err
                });
            }
        }
    });
};



function validate() {
    var name = $("#name").val();
    if (name == "") {
        $.notifyBar({
            cls: "error",
            html: "Səhifənin qısa adını daxil edin"
        });
        return false;
    }
    var title = $("#title").val();
    if (title == "") {
        $.notifyBar({
            cls: "error",
            html: "Səhifənin geniş adını daxil edin"
        });
        return false;
    }
    var menu = $("#menu").val();
    if (menu == "") {
        $.notifyBar({
            cls: "error",
            html: "Səhifə harada yerləşəcək? Mütləq birini seçin"
        });
        return false;
    }

    var parentcheck = $(".parentcheck:checked").val();
    var parent = $("#parent").val();
    if (!$(".parentcheck").is(":checked")) {
        $.notifyBar({
            cls: "error",
            html: "Ayrıca yoxsa hansısa başlıq altında? Mütləq birini seçin"
        });

        return false;
    } else if (parentcheck == '1') {
        if (parent == '0') {
            $.notifyBar({
                cls: "error",
                html: " Parent səhifəni seçin"
            });
            return false;
        }
    }

    return true;
}

$(document).ready(function () {

    $('.autosave').hide();
    $("#add_form").submit(function (e) {
        if (counter === 0) {
            if (validate()) {
                $('.autosave').show();
                counter++;
            }
        }
        postViaAjax(false)
        e.preventDefault();
    });


    $('#autosave').click(function () {
        if ($(this).is(':checked')) {
            if (autoSaveInterval) {
                clearInterval(autoSaveInterval);
            }
            autoSaveInterval = window.setInterval(call, 5000);

        } else {
            $('#submit_btn').attr({
                'value': 'Yadda saxla'
            });
            if (autoSaveInterval) {
                clearInterval(autoSaveInterval);
                autoSaveInterval = null;
            }
        }
    });

});

How to fix that problem? I want to show only message and break posting

Answer 1

Change your “submit” function :

$("#add_form").submit(function (e) {
    if (counter === 0) {
        if (validate()) {
            $('.autosave').show();
            counter++;
        }
        else // Add this:
             return false;
    }
    postViaAjax(false)
    e.preventDefault();


});

This should help you