CODEWITHSUNDEEP
jqueryajaxvalidationpost
huslabs
huslabs

Reputation: 11

AJAX form validation on submit

I have a function in the back-end to validate any given form, how ever, I am using this function and it's working perfectly while the form submission is not valid, BUT if the form is valid, my back-end return a string 'valid' and I should make the form to resume the POST ACTION

this is the code:

    $('form.ajaxpost').submit(function(event) {
        var valid = true;
        event.preventDefault();

        var form = $(this);
        var sbmtBtn = form.find('input[type=submit]');
        var sbmtBtnTxt = sbmtBtn.val();
        sbmtBtn.val('Validating ...').attr('disabled', 'disabled');

        $.post("/application/index/validate-form", form.serialize() + '&formname=' + form.attr('name'), function(data) {
            if (data != 'valid') {
                valid = false;
                $('body').find('script').append(data);
                $('html, body').animate({scrollTop: $(".has-error:first").offset().top}, 800);
                sbmtBtn.val(sbmtBtnTxt).attr('disabled', null);
                return false;
            }
            form.trigger('submit');
        })
    });

when it's return 'valid' the form triggers 'submit' again and again and for ever :(

Upvotes: 1

Views: 121

Answers (2)

huslabs
huslabs

Reputation: 11

it seems like there is no way to preventDefault the event and resubmit the form again. so the way it works is posting the form via AJAX after validation, rather than the default submission which has been prevented :) and here is the working code

    $('form.ajaxpost').submit(function(event) {
        event.preventDefault();

        var form = $(this);
        var sbmtBtn = form.find('input[type=submit]');
        var sbmtBtnTxt = sbmtBtn.val();
        sbmtBtn.val('Validating ...').attr('disabled', 'disabled');

        $.post("/application/index/validate-form", form.serialize() + '&formname=' + form.attr('name'), function(data) {
            if (data != 'valid') {
                $('body').find('script').append(data);
                $('html, body').animate({scrollTop: $(".has-error:first").offset().top}, 800);
                sbmtBtn.val(sbmtBtnTxt).attr('disabled', null);
                return false;
            } else {
                $.post(form.attr('action'), form.serialize());
                window.location = form.attr('action');
            }
        })
    });

Upvotes: 0

Aniruddha
Aniruddha

Reputation: 806

Your code has no terminating condition. Therefore submit button will trigger again and again.

Assuming you want to submit your only once after validation. Change your code to this.

var called_once = false; // identifier

$('form.ajaxpost').submit(function(event) {
    var valid = true;
    event.preventDefault();

    var form = $(this);
    var sbmtBtn = form.find('input[type=submit]');
    var sbmtBtnTxt = sbmtBtn.val();
    sbmtBtn.val('Validating ...').attr('disabled', 'disabled');

    $.post("/application/index/validate-form", form.serialize() + '&formname=' + form.attr('name'), function(data) {
        if (data != 'valid') {
            valid = false;
            $('body').find('script').append(data);
            $('html, body').animate({scrollTop: $(".has-error:first").offset().top}, 800);
            sbmtBtn.val(sbmtBtnTxt).attr('disabled', null);
            return false;
        }

        // triggering submit only when it is not called previously
        if (called_once === false) {
            form.trigger('submit');
            called_once = true;
        }
    })
});

Hope this solves the problem...

Upvotes: 2

Related Questions