I'm using the submit and ajax functions to check a form. When the form is submitted the submit event executes and within that event the data (a code the user has to fill in) is sent to the server to check if it's correct. If it is correct, the submit event supposes to return true (so the form submits), if it's incorrect the submit event supposes to return false (so submitting the form cancels). Here's my code that should do this:

2. $(function()
3. {
4. var submit = false;
6. $('#login').submit(function()
7. {
8. $('span.error').fadeOut('slow');
10. $.ajax(
11. {
12. url: '/ajax/login',
13. type: 'POST',
14. data: 'code=' + $('#code').val(),
15. success: function(response)
16. {
17. if (response != '')
18. {
19. $('span.error').fadeIn('slow').text(response);
20. submit = false;
21. }
22. else
23. {
24. submit = true;
25. }
26. }
27. })
29. return submit;
30. })
31. });

But here's the problem: While jQuery does the ajax request, the script continues. So it will return false - even if the code is validated - because the var submit has been set to false at line 4. When I submit the form again, the form is validated because 'submit' is true (but that's set to true the first time).

How can I ensure the submit function waits for the ajax request to finish?

Thanks in advance.