How do I submit a form using jQuery after AJAX validation?

Question

My form has one input which needs to be validated before submitting. After a successful validation I try to submit the form, but it doesn't submit.

My code looks like this:

$(document).ready(function() {
    $("#myForm").submit(function () {
        checkInputData();
        return false;  // to prevent default submit
    });
});

The validation function:

function checkInputData() {
    var id = $($("#id")).val();  // value, which needs to be validated
    $.get("check.php?id=" + id,  
        function(result){  
            if(result == 1) {  
                //if the result is 1, need to submit
                $("#myForm").unbind(); // to prevent recursion?
                $("#myForm").submit(); // doesnt work
            } else {  
                // dont submit, give some visual feedback, etc...
            }  
    });
}

What am i doing wrong? Thanks.

Why not do the validation when the form is submitted instead of making two trips to the server? Your validation method, as it stands, could be defeated unless you revalidate on form submit anyway. — Jason P
– Jason P, Commented Jul 14, 2013 at 13:26
no errors in console. need to validate before submitting, because the form submits large images. — Dusan
– Dusan, Commented Jul 14, 2013 at 13:38
ok try to check for the returning result maybe you are missing something(it happens) — ebram khalil
– ebram khalil, Commented Jul 14, 2013 at 13:39

Scott · Accepted Answer · 2013-07-14 14:46:05Z

4

You need to return the result from your AJAX validation request. You can do this by setting this check to being async: false, this means the checkInputData() will wait for the result to come back, and you can return it, controlling the submission of the form.

In your code it's not waiting for the $.get action to happen, and it appears to skip over meaning your code will always appear to return true; from the checkInputData() call. You don't need to return false in submit, if used as below.

I have used the $.ajax call in place of $.get because it allows you to control the async property, but it essentially does the same thing. You can read more about it here.

function checkInputData() {
    var value = $("#id").val();  // Value to be validated
    var passedValidation = false;
    $.ajax("check.php?id=" + value, {
        async: false,
        success: function(result){
            // Do whatever check of the server data you need here.
            if(result == "1") {  
                // Good result, allow the submission
                passedValidation = true;
            } else {
                // Show an error message
            }
        }
    });
    return passedValidation;
}

$(document).ready(function() {
    $("#myForm").on("submit", function () {
        return checkInputData();
    });
});

I assume you have a button such as below, within your form with id myForm:

<input type="submit" value="Submit Form" />

edited Jul 14, 2013 at 14:46

answered Jul 14, 2013 at 13:45

Scott

21.6k8 gold badges67 silver badges73 bronze badges

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

2 Comments

Dusan Over a year ago

This is working. async: false is the solution. Thanks for your help!

Benjamin Gruenbaum Over a year ago

Additional people reading this: This is bad advice, don't ever do this - this will hang the browser while waiting for a response.

Manoj Yadav · Accepted Answer · 2013-07-14 13:45:56Z

0

It's not getting submitted may be because you are not returning 1 on successful validation for result in below if condition

if(result == 1) {

In check.php your output should be 1, like echo '1'; if input is valid. And make sure there is not any other output before or after it.

edited Jul 14, 2013 at 13:45

answered Jul 14, 2013 at 13:37

Manoj Yadav

6,6121 gold badge25 silver badges21 bronze badges

Comments

Tomas Santos · Accepted Answer · 2013-07-14 18:52:37Z

0

AMember is correct your always returning false, there are a few solution. One solution is for you to bind your validation to a button element or any element that will not submit the form.

HTML

<form id="myForm">
   .
   input elements
   .
   <button class= "submit" type="button" onclick="submit">Submit</button>
</form>

Document Ready

$(function() 
{
   var $submit = $(".submit");

   $submit.click(function () 
   {
     checkInputData();

   });
});

Validation Callback Function

function checkInputData() 
{
   var id = $('#id').val();  // value, which needs to be validated

   $.get("check.php?id=" + id, function(result)
   {  
        if(result == 1) 
        {
           var $myForm = $("#myForm");

            //if the result is 1 submit.
            $myForm.submit();
        } 
        else 
        {  
            // dont submit, give some visual feedback, etc...
        }  
   });

}

edited Jul 14, 2013 at 18:52

answered Jul 14, 2013 at 13:58

Tomas Santos

5504 silver badges12 bronze badges

4 Comments

Scott Over a year ago

Binding to the submit event is the better way to do it. If you use an mobile browser such as iOS it will allow you to submit using it's own UI Submit button on the keyboard, thus avoiding your button, and the validation. Some browsers also submit a form when the return key is pressed. The purpose of the submit event is to control validation.

Tomas Santos Over a year ago

@Scott Your correct my solution would be an incorrect in design if your supporting mobile platform. With that being said the user could only bypass the button if an input of type submit is present in the form. Since in my example I don't have any input of type submit the ios keyboard button would not work.

Scott Over a year ago

Thanks for your reply. As your example requires that the OP avoids <input type="submit" /> in favour of <button></button> to prevent the submission issues on mobile platforms, it is not as you have pointed out a suitable cross platform solution; You are also then putting unnecessary design constraints on the OP. Unless told otherwise it's best to assume they also want support for mobile platforms too. As such it cannot be touted as the best solution is for you; Your answer promotes bad practices, until it is updated more suitably I can't remove my downvote.

Tomas Santos Over a year ago

@Scott Agreed, it was poor choice of words on my part.

Manak Kapoor · Accepted Answer · 2013-07-14 13:19:45Z

-1

       $(document).ready(function() {
            $("#myForm").submit(function (e) {
                checkInputData();
                //return false;  // to prevent default submit <-- THIS IS WRONG


                e.preventDefault(); //Try this :)
            });
        });

Returning false will prevent it from submitting in all cases.

answered Jul 14, 2013 at 13:19

Manak Kapoor

9823 gold badges12 silver badges21 bronze badges

1 Comment

Bojangles Over a year ago

This isn't really explaining what's going wrong. Add a description of what you changed, not just some "this is wrong" code comments

Collectives™ on Stack Overflow

How do I submit a form using jQuery after AJAX validation?

4 Answers 4

2 Comments

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related