Question

我想在Bootstrap模态中（在输入字段下方）显示表单验证错误，我之前已经做过，但是现在由于我使用ajax发送数据，因此我无法显示验证错误。

请帮助。预先感谢

**View**

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <form id="myform">
            <div class="modal-body">
            <?php echo validation_errors(); ?>
               <input class="form-control" type="text" name="user_name" id="user_name">
                <input class="form-control" type="text" name="name" id="name">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="add">Save changes</button>
            </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $(document).on('submit','#myform',function(event){
            event.preventDefault();
            let name=$("#name").val();
            let user_name=$("#user_name").val();
             $.ajax({
                    url:"<?php echo base_url(). 'welcome/add_data';?>",
                    method: 'POST',
                    data:new FormData(this),
                    contentType:false,
                    processData:false,
                    success:function (data) {
                        alert(data);
                        $('#myform')[0].reset();
                        $('#myModal').modal('hide');
                       location.reload();
                    }
                });
        })
    })
</script>

**Controller**

public function add_data(){
        $this->form_validation->set_rules('name', 'Name', 'required');
        $this->form_validation->set_rules('user_name', 'User Name', 'required');
        if ($this->form_validation->run() == FALSE) {
            $this->load->view('main_view');
        }
        else {
            $data=array(
                'name'=>$this->input->post('name'),
                'user_name'=>$this->input->post('user_name'),
            );
            $this->Test_model->add_data($data);
            redirect('welcome',"refresh");
        }
}

Answer 1

如果验证为假，则要返回验证错误的json对象：

private void AddEventsToLabel(Label label)
{
    label.Click -= LabelClick;
    label.MouseEnter -= LabelMouseEnter;
    label.MouseLeave -= LabelMouseLeave;

    label.Click += LabelClick;
    label.MouseEnter += LabelMouseEnter;
    label.MouseLeave += LabelMouseLeave;
}

private void LabelClick(object sender, EventArgs e)
{
    SetColor();
    Label theLabel = (Label)sender;
    clickedLabel = theLabel;
}

private void LabelMouseEnter(object sender, EventArgs e)
{
    Label theLabel = (Label)sender;
    if (theLabel != clickedLabel) theLabel.BackColor = Color.Red;
}

private void LabelMouseLeave(object sender, EventArgs e)
{
    Label theLabel = (Label)sender;
    if (theLabel != clickedLabel) theLabel.BackColor = Color.Yellow;
}

现在，您将在ajax成功中收到带有验证错误数组的响应对象，然后可以遍历该数组并显示所需的错误。

$response['errors'] = $this->form_validation->error_array();
header('Content-Type: application/json');
echo json_encode($response);

如何在Bootstrap模态中添加表单验证错误

1 个答案: