Question

我需要检查用户名是否存在。如果它存在，我增加一个变量“form_error”。如果“form_errors”是＆gt; 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

您最好的选择可能是在提交功能之外使用某种变量例如

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 validation plugin？您可以使用远程验证规则设置表单，以检查用户名是否有效。 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();
    }
});

使用ajax进行Jquery表单验证

4 个答案: