Question

我的团队负责构建一个系统，该系统将作为我们下一个项目的程序化原型，将使用codeigniter和jquery开发。因为我是网络编程的新手，所以解决问题需要相当长的时间。以下代码困扰了我两天。

$(function() {
var bln_valid = true;

$('#btn_save').click(function() {
    $('.warning-label').html('');


    if ($('#txt_customer_code').val() == '') {
        // did user provide customer code?
        $('#lbl_customer_code').html('Customer Code has to be filled in.');
        bln_valid = false;
    } else {
        // is the code unique?
        $.post('<?php echo base_url()."index.php/customer/is_code_exists" ?>', {
            txt_customer_code   : $('#txt_customer_code').val()
        },
        function(data) {
            if(data.error == undefined) {
                if (data['code_exists'] == 1) {
                    $('#lbl_customer_code').html('Customer Code is not available.');
                    bln_valid = false;
                }
            } else {
                $('#lbl_customer_code').html('Customer Code is not available.');
                bln_valid = false;
            }
        },'json'
        );                      
    }   

    if (bln_valid == false) {
        return false;
    } else {
        // insert the code to database
        $.post('<?php echo base_url()."index.php/customer/add" ?>', {
            txt_customer_code   : $('#txt_customer_code').val(),
        },
        function(data) {
            if(data.error == undefined) {
                $('#lbl_customer_code').html(data['key']);
                if (data['key'] == '') {
                    $('#lbl_customer_code').html('Failed Saving.');
                    return false;
                } else {
                    $('#lbl_customer_code').html('Successfully saving.');
                }
            } else {
                $('#lbl_customer_code').html('Failed Saving.');
                return false;
            }
        },'json');                      
    }                   
});});

所以我想在将其插入数据库之前验证客户代码的唯一性。但似乎使用ajax的验证和插入代码几乎同时执行。即使客户代码不是唯一的，当插入开始时，bln_valid仍保留其TRUE值。

有没有办法允许插入代码在验证完成后运行？我已经阅读了关于jquery的队列，但未能掌握这个概念并将其应用于解决我的问题。
是否有更有效的方法来实现验证和提交数据的目标？

我尽量不使用任何插件，因为我被告知要尽可能减少使用任何外部作品。

感谢您的帮助。

Answer 1

你试试Event.PreventDefault() ?

Answer 2

Jquery有很多用于ajax提交和验证的插件。您可以考虑使用它们，而不是编写自己的逻辑。我推荐

Jquery form plugin - 通过ajax提交表单。删除提交，点击一下按钮，通过ajax提交表单。
Jquery Validation plugin - 根据课程验证所有内容。您甚至可以使用.addValidator方法编写自己的逻辑。

工作示例here

如何防止jquery同时验证和提交数据

2 个答案: