Question

我想请一些帮助。

我将表格放在引导模态窗口内。

<div class="modal-content">

            <div class="modal-body">

                <div id="ajaxResults"></div>

                <?php echo form_open('controller-name/form-process'), array('id' => 'modal-form'); ?>

                    <input type="hidden" name="title" id="hid-title" />

                    <div class="form-group">
                        <?php echo form_input('first_name', set_value('first_name', $this->input->post('first_name')), 'id="first-name" class="form-control" placeholder="First name"'); ?>
                    </div>

                    <div class="form-group">
                        <?php echo form_input('last_name', set_value('last_name', $this->input->post('last_name')), 'id="last-name" class="form-control" placeholder="Last name"'); ?>
                    </div>

                    <div class="form-group">
                        <?php echo form_input('email', set_value('email', $this->input->post('email')), 'id="email" class="form-control" placeholder="Email"'); ?>
                    </div>

                    <div class="form-group">
                        <?php echo form_input('company', set_value('company', $this->input->post('company')), 'id="company" class="form-control" placeholder="Company"'); ?>
                    </div>

                <?php echo form_close(); ?>
            </div><!-- /.modal-body -->

            <div class="modal-footer">
                <button type="button" class="btn btn border-black" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn border-theme" id="form-submit-btn">Submit form</button>
            </div><!-- /.modal-footer -->

        </div><!-- /.modal-content -->

当我点击Submit the Form按钮时，我向我的form_process控制器发送ajax请求，我在那里进行表单验证。这是我的form_process函数和ajax脚本

的代码

public function form_process() {

    if ($this->input->post()) {

        $rules = array(
            'first_name' => array(
                'field' => 'first_name',
                'label' => 'First name',
                'rules' => 'required|trim|min_length[2]',
            ),
            'last_name' => array(
                'field' => 'last_name',
                'label' => 'Last name',
                'rules' => 'required|trim|min_length[2]',
            ),
            'email' => array(
                'field' => 'email',
                'label' => 'Email',
                'rules' => 'required|trim|valid_email',
            ),
            'company' => array(
                'field' => 'company',
                'label' => 'Company',
                'rules' => 'required|trim',
            ),
        );

        $this->load->library('form_validation');
        $this->form_validation->set_rules($rules);

        // validate the form
        if ($this->form_validation->run()) {

            $response = array(
                'status' => '200',
                'message' => 'Thank you! We have sent an email to ' . $this->input->post('email') . ' to get your white paper.',
            );

        } else {

            $response = array(
                'status' => '400',
                'message' => validation_errors(),
            );
        }

// return the result of the form process    

    $this->output->set_status_header($response['status'])->set_content_type('application/json', 'utf-8')
        ->set_output(json_encode($response, JSON_PRETTY_PRINT))->_display();
        exit();

    }

ajax脚本看起来像这样

$('#myModal').on('show.bs.modal', function (event) {

                    $('#modal-form').show();
                    $('#ajaxResults').removeClass('alert alert-success alert-error');

                    // Button that triggered the modal
                    var button = $(event.relatedTarget); 

                    // Extract info from data-* attributes
                    var recipient = button.data('whatever');


                    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                    var modal = $(this);
                    modal.find('.modal-title').html('New message to <br/>' + recipient);
                    modal.find('.modal-body input[type=hidden]').val(recipient);



// submit the form
                    $('#form-submit-btn').on('click', function (event){
                        event.preventDefault();

                        var url = $('#modal-form').attr('action');

                        // send ajax request
                        $.ajax({
                        url: url,
                        type : 'POST',
                        data : {
                            'first_name' : $('#first-name').val(),
                            'last_name' : $('#last-name').val(),
                            'email' : $('#email').val(),
                            'company' : $('#company').val(),
                            'title' : $('#hid-title').val(),
                        },
                        dataType: 'json',
                        success : function(response) {
                            alert(response.message);
                            // console.log(response.message);
                            $('#ajaxResults').removeClass('alert alert-success alert-error');

                            if (response.status == 200) {
                                $('#modal-form').hide();
                                $('#ajaxResults').addClass('alert alert-success').html(response.message);
                                alert('AAAAAAAAAAAAAAAAAAAAAAAAAAAA');
                            }

                            if (response.status == 400) {
                                $('#modal-form').show();
                                $('#ajaxResults').addClass('alert alert-error').html(response.reason);
                                alert('BBBBBBBBBBBBBBBBBBBBBBBBBBBB');
                            }
                        },
                        error: function(response){
                            // code ...
                            $('#ajaxResults').removeClass('alert alert-success alert-error');

                            if (response.status == 200) {
                                $('#modal-form').hide();
                                $('#ajaxResults').addClass('alert alert-success').html(response.message);
                                alert('CCCCCCCCCCCCCCCCCCCCCCCCCCC');
                            }

                            if (response.status == 400) {
                                $('#modal-form').show();
                                $('#ajaxResults').addClass('alert alert-error').html(response.reason);
                                alert('DDDDDDDDDDDDDDDDDDDDDDDDDDDD');
                            }
                        }
                    });
                    });
                });

编辑我对我的ajax脚本进行了更新并发布了一些警告消息，如您所见。当我单击submit按钮而不提交表单（因此存在错误）时，会弹出警告DDDDDDD。

当我填写所有字段并提交表单时，会弹出警告CCCCCCC（!!!）。此外，ajaxResults div获取了.alert和.allert-success类，但仍然无法看到任何消息。

任何想法我做错了什么？

其他问题：error: function(response)是否用于显示验证失败的情况？

我还尝试在此函数中移动验证错误并仅在success : function(response)上保留表单的成功子目录，但仍然没有运气。

Answer 1

我可以看到你没有正确解析数据

示例：在alert('DDDDDDDDDDDDDDDDDDDDDDDDDDDD');行

在将数据附加到ajaxResults之前，您需要正确转换数据

response.responseText =＆gt;会给你json字符串。

JSON.parse =＆gt;将字符串转换为JSON Obj，以便您可以像.variableName

请在您之前添加以下代码 $('#ajaxResults').addClass('alert alert-error').html(response.reason);

添加以下行

var mess = JSON.parse(response.responseText).message;

将response.reason替换为mess，它应显示错误消息

如果有效，请将其标记为答案

完整代码：

 if (response.status == 400) { 
                                $('#modal-form').show();
                                 var mess = JSON.parse(response.responseText).message;
                                $('#ajaxResults').addClass('alert alert-error').html(mess);
                                alert('DDDDDDDDDDDDDDDDDDDDDDDDDDDD');
                            }

工作

Answer 2

如果它带你到错误部分，那么你必须使用这样的东西来抓住它：

allprojects {
    repositories {
        jcenter()
        // add the esri arcgis maven repo
        maven {
            url 'http://dl.bintray.com/esri/arcgis'
        }
    }
}

如果ajax调用成功，就像这样：

,
error: function (xhr, ajaxOptions, thrownError) {   
    alert(thrownError) ; // or alert(xhr.responseText); 
     $('#ajaxResults').addClass('alert alert-error').html(thrownError) ;       
}

Answer 3

＆＃34;问题＆＃34;是output->set_status_header($response['status'])这个请求总是成功的，但设置标题为400会搞乱这个功能。

我删除了这段代码，现在工作正常！但是我仍然需要添加

error: function (xhr, ajaxOptions, thrownError) {   
    alert(thrownError) ; // or alert(xhr.responseText); 
     $('#ajaxResults').addClass('alert alert-error').html(thrownError) ;       
}

在请求失败的情况下获取任何错误。

CodeIgniter ajax表单验证未在屏幕上显示任何消息

3 个答案: