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

Question

I want to display form validation error in the Bootstrap modal (below the input fields), I have done it previously, but now since I am using ajax to send the data I am having trouble displaying the validation error.

Please Help. Thanks in advance

**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

If your validation is false you want to return json object with the validation errors:

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

Now you will receive this response object in your ajax success with a validation errors array, you can then loop through this array and display the error however you want.

$.each(data.errors, function(index, error) {
    alert(error);    // or maybe display it in a bootstrap alert
});