Jquery form validation with ajax

Question

i need to check if username exist. If it exist, I increment a variable "form_error". If "form_errors" is > 0, then i stop code with return false.

But, when i make an Ajax call, i cannot increment this variable. Probably is it a scope / visibility problem?

So, in the case that i have an error on username, my form_errors will be forever 0 and form is submit...

How i can increment that form_errors?

Thank you to all, I leave a piece of code

$('#add-sponsor').submit(function() {
var form_errors = 0;
var username = ('#username').val();
$.ajax({
        url         :   location.protocol + '//' + location.host + '/commands.php?action=check-username',
        data        :   {
                            username    : username
                        },
        type        :   'post'
    }).done(function (result) {
        if (result=='false') {
            $('#username').parent().addClass('has-error');
            $('#username').parent().removeClass('has-success');
            $('#username').parent().next('.help-block').text('Questo username già esiste');
            form_errors++;
        } else {
            $('#username').parent().addClass('has-success');
            $('#username').parent().removeClass('has-error');
            $('#username').parent().next('.help-block').text('');
        }
    }); // ajax


if (form_errors > 0) {
    return false;
}

console.log(form_errors); // <- this is forever 0
}

this would be forever 0 because you use `return false` before it, if errors > 0. It would be better if you debug in your browser what result is. — Admit, Oct 15 '13 at 09:33
possible duplicate of [How to return AJAX response Text?](http://stackoverflow.com/questions/1225667/how-to-return-ajax-response-text) — Quentin, Oct 15 '13 at 09:39

score 3 · Accepted Answer · answered Oct 15 '13 at 09:36

3

$.ajax function is asynchronous so will continue execution of

if (form_errors > 0) {
    return false;
}

before the done function is executed.

answered Oct 15 '13 at 09:36

Chris Pickford

8,642
5
42
73

In effect, add "async: false" did the trick. I made an error during copy and paste, changing last piece of code. Of course first i check if there are errors, console.log them and AFTER i "return false". This was only a typo error :) Thank you for the indication of "async" ;) – sineverba Oct 16 '13 at 13:36

Christian Phillips · Answer 2 · 2013-10-15T09:42:38.540

1

if (form_errors > 0) {
    return false;
}

console.log(form_errors); // <- this is forever 0

You check here if you have errors, and if so, you return...so, the console.log will never be hit, unless you have no errors. Maybe just use...

if (form_errors > 0) {
    console.log(form_errors);
}

edited Oct 15 '13 at 09:42

answered Oct 15 '13 at 09:35

Christian Phillips

18,399
8
53
82

score 0 · Answer 3 · answered Oct 15 '13 at 09:41

Your best bet might be to use some sort of variable outside your submit function eg

var isValid = false;
$('#add-sponsor').submit(function() {
    if(!isValid)
    {
        var form_errors = 0;
        var username = ('#username').val();
        $.ajax({
                url         :   location.protocol + '//' + location.host + '/commands.php?action=check-username',
                data        :   { username    : username },
                type        :   'post'
        }).done(function (result) {
            if (result=='false') {
                $('#username').parent().addClass('has-error');
                $('#username').parent().removeClass('has-success');
                $('#username').parent().next('.help-block').text('Questo username già esiste');
                isValid = false;
                $('#add-sponsor').submit();
            } else {
                $('#username').parent().addClass('has-success');
                $('#username').parent().removeClass('has-error');
                $('#username').parent().next('.help-block').text('');
                isValid = true;
                $('#add-sponsor').submit();
            }
        }); // ajax

        return false;
    }
    return true;
}

score 0 · Answer 4 · answered Oct 16 '13 at 07:24

Considered using the jQuery validation plugin? You could set up your form using a remote validation rule to check whether the username ist valid. jQuery validation let's you implement your callbacks within the submitHandler or the invalidHandler.

Try this code if you want to test it. Just make sure to include the jquery.validate.js as well as additional-methods.js into your page.

var validator = jQuery("the-sponsor-form").validate({
    messages: {
        username: {
            remote: 'Questo username già esiste'
        }
    },
    rules: {
        username: {
            required: true,
            remote: {
                url: location.protocol + '//' + location.host + '/commands.php?action=check-username',
                type: 'post',
                data: {
                    username: $('#username').val();
                }
            }
        }
    },
    submitHandler: function(form) {
        alert("now submit the form");
        jQuery(form).submit();
    }
});

Jquery form validation with ajax

4 Answers4