jQuery submit form AFTER validating it with ajax

Question

I have a form with one tricky field that needs to pass validation on the server side. So i need to capture for submit, send ajax request with this field, get result, if result is valid the continue form submission, other wise stop submission and show message.

How would i do that?

I got lost a little bit in "big picture" with events and callbacks.

Here is what i have so far.

$("form").submit(function( event ) {
    event.preventDefault();
    return check();
});


function check() {

    var field = $('#myFiled').val();
    if (!field ) {
        show.error('Please enter VIN number and try again.');
        return false;
    }
    $.getJSON('MyURL', function(data){
        if (!data.valid) show.error('Invalid entry! Please try again.');
    })
}

UPDATE Please read the question. In case of successful validation i need to continue regular form submission. Not via AJAX.

dklingman · Accepted Answer · 2014-04-26 02:28:47Z

0

$("form").submit(function( event ) {
    event.preventDefault();
    checkAndSubmit();
});


function checkAndSubmit() {

    var field = $('#myFiled').val();
    if (!field ) {
        show.error('Please enter VIN number and try again.');
    }
    else {
        $.getJSON('MyURL', function(data){
            if (!data.valid) {
                show.error('Invalid entry! Please try again.');
            }
            else {
                $.post('yourFromPostURL', $('form').serialize(), function(data){
                    //show something of success or failure.
                });
            }
        })
    }
}

answered Apr 26, 2014 at 2:28

dklingman

2361 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

rinchik Over a year ago

i need to continue regular submit. not $.post

MattSizzle Over a year ago

@dklingman I agree with you completely about serialize that is the best approach in this situation.

dklingman Over a year ago

One I did a little searching and everything I've found what you are trying to do isn't going to happen unless to take the approach I suggested. link. On another note being rude isn't going to get you much help either.

rinchik Over a year ago

You are the third person whos not reading the question. I DO NOT need AJAX form submission

MattSizzle Over a year ago

@rinchik I re-factored my answer based on your latest comments.

|

Community · Accepted Answer · 2017-05-23 11:51:56Z

0

Judging by your check() function, you already understand basic JavaScript validation. If you want a form's validation to fail, have its .submit() method return false, otherwise return true.

Just treat the data returned by the AJAX request the same way you did the field variable.

Perhaps the one thing your missing is how to make check() return false from inside the getJSON function. The answer to that is a simple matter of variable scope.

var data;
$.getJSON('MyURL', function(data_){
        data = data_;

    });
if (!data.result) return false;

Since JavaScript has function scope, data will still be accessible inside of .getJSON().

There is one more thing though, .getJSON() is an asynchronous AJAX request, meaning your validation function will finish without waiting for the result of the request. You want to use a syncrhonous ajax request so your check() function won't finish until your validation is done. However there is no way to make .getJSON() synchronous so you will have to use the .ajax() method. See this post.

EDIT: Your issue is if there are no validation errors, you do not return a value. You must return true;.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Apr 26, 2014 at 2:29

Daniel

1,9704 gold badges18 silver badges36 bronze badges

2 Comments

rinchik Over a year ago

Did you read the question? Do you know what async is? And what callback is?

rinchik Over a year ago

I don't mean to be rude but In what universe your opus above is the answer to my question? Especially considering that your code contradicts your referencing

Community · Accepted Answer · 2017-05-23 11:59:02Z

The alternative to the AJAX form submit is to prevent form submission and execute validation at the button level.

$('#submitButtonID').click(function (e) {
    e.preventDefault();
    //start your AJAX validation
    checkAndSubmit();
}

Then validate and upon success, you can still submit the form regularly.

function checkAndSubmit() {
    var field = $('#myField').val();
    if (!field ) {
        show.error('Please enter VIN number and try again.');
    }
    else {
        $.getJSON('MyURL', function(data){
            if (!data.valid) {
                show.error('Invalid entry! Please try again.');
            }
            else {
                $('form').submit();
            }
        });
    }
}

Server side validations will run upon post, but you won't interrupt the form submission with your AJAX validation because it's only captured at the button level. (If you need to capture the Enter button, see this answer: Capturing Enter button to submit form

Collectives™ on Stack Overflow

jQuery submit form AFTER validating it with ajax

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related