CODEWITHSUNDEEP
javascriptajaxjquerypost
The Coder
The Coder

Reputation: 211

Ajax validation issue

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

Upvotes: 1

Views: 221

Answers (3)

AmGates
AmGates

Reputation: 2123

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

Upvotes: 3

aamir sajjad
aamir sajjad

Reputation: 3039

other option could be to use jquery validation plugin before posting data to web server. and use in your java script file

$("#Form").validate();

Upvotes: 0

Cyril N.
Cyril N.

Reputation: 39859

Change your "submit" function :

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

    // Add this:
    return false;
});

Upvotes: 1

Related Questions