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.

score 0 · Answer 1 · answered Apr 26 '14 at 02:28

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 '14 at 02:28

dklingman

236
1
14

i need to continue regular submit. not $.post – rinchik Apr 26 '14 at 02:34
1

@dklingman I agree with you completely about `serialize` that is the best approach in this situation. – MattSizzle Apr 26 '14 at 04:20
1

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](http://stackoverflow.com/questions/9331042/how-to-continue-form-submission-after-an-ajax-call). On another note being rude isn't going to get you much help either. – dklingman Apr 26 '14 at 17:29
You are the third person whos not reading the question. I DO NOT need AJAX form submission – rinchik Apr 26 '14 at 17:40
@rinchik I re-factored my answer based on your latest comments. – MattSizzle Apr 26 '14 at 20:35
I did read you question, as I said in my previous comment, I searched around and with what you are asking for, validating via ajax then continuing submitting the form, everyone uses or has posted, on other forms and blogs, the solution I gave. The only way you are going to continue normal form submission is you'd almost need to do some like is suggested in the link I provided. Set some flag/attribute that it's valid and submit the form again. In any case as disrespectful and rude as you are being, with the shouting, I will not waste my time trying to help. – dklingman Apr 26 '14 at 20:42

score 0 · Answer 2 · edited May 23 '17 at 11:51

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;.

Did you read the question? Do you know what async is? And what callback is? — rinchik, Apr 26 '14 at 02:36
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` — rinchik, Apr 26 '14 at 02:46

score 0 · Answer 3 · edited May 23 '17 at 11:59

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

jQuery submit form AFTER validating it with ajax

3 Answers3