Codeigniter Ajax登录显示相同的多个错误，如果提交多次并发现错误

Question

目前我正在通过ajax提交表单

但是当出现验证错误并且它显示正常但如果我再次单击它会显示多个错误。它出于某种原因重复了错误。

问题：如果每次提交时表单上都有错误，如何停止多次显示相同的错误消息是怎么回事。

图像

控制器

<?php

class Login extends MX_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->library('form_validation');
    }

    public function index() {
        $data['refresh'] = current_url();

        $this->load->view('default/template/members/login_view', $data);
    }

    public function validate() {

        $data = array('success' => false, 'messages' => array());

        $this->form_validation->set_rules('username', 'username', 'trim|required');
        $this->form_validation->set_rules('password', 'password', 'trim|required');
        $this->form_validation->set_error_delimiters('<p class="text-danger"','</p>');

        if ($this->form_validation->run() == false) {

            $data['messages'] = validation_errors('<div class="text-danger">', '</div>');

        } else {

            $data['success'] = true;

            echo json_encode(array("status" => TRUE));

        }

        echo json_encode($data);
    }
}

查看

<form id="form-login" class="form-horizontal" enctype="multipart/form-data">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Login</h4>
        </div>
        <div class="modal-body">

            <div id="error"></div>

            <div class="form-group">
            <label class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><b>Username/Email</b></label>
            <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
            <input type="text" name="username" id="username" class="form-control" placeholder="Enter Username" />
            </div>
            </div>

            <div class="form-group">
            <label class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><b>Password</b></label>
            <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
            <input type="password" name="password" id="password" class="form-control" placeholder="Enter Password" />
            </div>
            </div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="submit">Login</button>
        </div>
    </div>
</div>
</form>

<script type="text/javascript">
$(document).ready(function() {

    $('#close').on('click', function(e) {
        location.reload();
    });

    $('#submit').on('click', function(e) {

        e.preventDefault();

        $.ajax({
            url: "<?php echo base_url('catalog/members/login/validate');?>",
            type: 'post',
            dataType: 'json',
            success: function(response){
                if (response.success == true) {

                } else {

                    $( "#error" ).append(response.messages);
                }
            }
        });

    }); 
});
</script>