Question

目标：继续通过json回调显示任何表单验证错误

问题：当我在表单上提交无效输入时，它会在div元素中显示错误消息。如果所有输入都有效，它将处理ajax请求并在div元素中显示成功消息。之后，表单重置但模态保持打开状态。当我尝试再次验证输入时，不显示任何错误消息。当我尝试测试有效输入时仍然显示相同的消息。

简而言之：Ajax成功功能第二次无效。

这是我的代码：

Bootstrap Modal（放置表单输入的地方）

<div class="modal fade" id='frmModal'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class='close' data-dismiss='modal'>&times;</button>
                <h4 class='title'>Add new data</h4>
            </div>
            <div class="modal-body">
                <?php echo form_open('Employee/save',array('id'=>'frm', 'class'=>'form-horizontal')); ?>
                <div id="message"></div>
                    <div class="form-group">
                        <label for='fname' class='col-md-3 control-label'>First Name:</label>
                        <div class="col-md-9">
                        <input type="text" name="fname" id='fname' class='form-control' placeholder='First Name...'>
                        </div>
                        </div>
                        <div class='form-group'>
                        <label for='lname' class='col-md-3 control-label'>Last Name:</label>
                        <div class="col-md-9">
                        <input type="text" name="lname" id='lname' class='form-control' placeholder='Last Name...'>
                        </div>
                        </div>
                        <div class='form-group'>
                        <label for='age' class='col-md-3 control-label'>Age:</label>
                        <div class="col-md-9">
                        <input type="text" name="age" id='age' class='form-control' placeholder='Age...'>
                        </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary action" type='submit'><i class='glyphicon glyphicon-floppy-disk'></i> Save Data</button>
                    </div>
                <?php echo form_close(); ?>
            </div>
        </div>
    </div>
</div>

Jquery代码：

$(document).on('submit','#frm',function(e){
    e.preventDefault();
    var form = $('#frm');
    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        dataType: 'json',
        encode: true,
        data: form.serialize(),
        success: function(data) {
            if (!data.success) {
                if (data.errors) {
                    $('#message').html(data.errors).addClass('alert alert-danger');
                }
            } else {
                 reloadData();

                $('#message').html("<span class='glyphicon glyphicon-ok'></span> " + data.message).removeClass('alert alert-danger').addClass('alert alert-success');
                setTimeout(function() {
                    $("#message").fadeTo(500, 0).slideUp(500, function() {
                        $(this).remove();
                    });
                }, 3000);
               $('#frm')[0].reset();
            }
        }
    });
});

CodeIgniter控制器：

$this->form_validation->set_rules('fname','First Name', 'required|trim');
    $this->form_validation->set_rules('lname','Last Name', 'trim|required');
    $this->form_validation->set_rules('age','Age', 'trim|numeric|required');

    if($this->form_validation->run()===FALSE)
    {
        $info['success'] = false;
        $info['errors'] = validation_errors();
    }
    else
    {
        $info['success'] = true;
        $data = array(
                    "firstname" => $this->input->post('fname'),
                    "lastname" => $this->input->post('lname'),
                    "age" => $this->input->post('age'),
                      );
        $this->Employee_model->save('ci_table', $data);
        $info['message'] = 'Successfully saved data';
    }
    $this->output->set_content_type('application/json')->set_output(json_encode($info));
}

Answer 1

我想我明白了......表单仍然有效，但邮件没有出现？如果是这样的话，请尝试下面的...

您正在删除#message元素而不是清除它...尝试：

 $("#message").fadeTo(500, 0).slideUp(500, function() {
                    $(this).empty();

这样你就可以清空#message元素而不是完全删除它。

Ajax成功功能第二次无法运行

1 个答案: