使用ajax进行jQuery表单验证

Question

我需要检查用户名是否存在。 如果存在，我将增加一个变量“ form_error”。 如果“ form_errors”> 0，则我停止返回false的代码。

但是，当我进行Ajax调用时，无法增加此变量。 可能是范围/可见性问题吗？

因此，如果我的用户名有误，我的form_errors将永远为0并且表单已提交...

我如何增加form_errors？

谢谢大家，我留下了一段代码

$('#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
}

Answer 1

$ .ajax函数是异步的，因此将继续执行

if (form_errors > 0) {
    return false;
}

在执行完功能之前。

Answer 2

if (form_errors > 0) {
    return false;
}

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

您在这里检查是否有错误，如果是，则返回...所以，除非没有错误，否则console.log将永远不会被点击。 也许只是用...

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

Answer 3

最好的选择可能是在您的Submit函数之外使用某种变量，例如

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

Answer 4

考虑使用jQuery验证插件吗？ 您可以使用远程验证规则来设置表单，以检查用户名是否有效。 jQuery验证使您可以在SubmitHandler或invalidHandler中实现回调。

如果要测试，请尝试此代码。 只要确保在页面中包含jquery.validate.js以及Additional-methods.js。

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();
    }
});