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

我想要一些帮助

我在引导模式窗口中放置了一个表单

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

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脚本进行了更新，并放置了一些警告消息，如您所见。当我在没有提交表单的情况下单击“提交”按钮时，会弹出警告DDD

当我填写所有字段并提交表单时，会弹出警报CCCCCCC！！！。此外，ajaxResults div获取.alert和.allert成功类，但仍然看不到任何消息

知道我做错了什么吗

附加问题：错误：functionresponse是否用于显示验证失败的情况

---

我还尝试将验证错误移到这个函数中，并保持成功：functionresponse仅成功提交表单，但仍然没有成功

我可以看出您没有正确解析数据

示例：在警报“dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd；线

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

response.responseText=>将为您提供json字符串

=>将字符串转换为JSON Obj，以便 像.variableName一样使用它

请在开始之前添加以下代码 $'ajaxResults'.addClass'alert alert error'.htmlresponse.reason

添加以下行

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

替换response.reason to Miss它应该显示错误消息

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

完整代码：

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

---

工作

如果它将您带到错误部分，那么您必须使用类似以下的方法来捕捉它：

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

如果ajax调用成功，则如下所示：

,
succes: function(data, status, jqXHR){
   if (status == 200) {
      $('#modal-form').hide();
      $('#ajaxResults').addClass('alert alert-success').html(response.message);
      alert(data);
   }
}

问题是这个输出->设置_status_header$response['status']请求总是成功的，但是将header设置为400会破坏功能

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

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

---

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

需要更多信息。请复制Response.message-一旦您提交表单，首先您在表单\u open中的语法错误，它应该是表单\u open'home/form process'，array'id'=>'modal form'；如果您只想在每个输入字段后显示错误消息，这将显示错误交叉响应到first_name etcHow我可以单独获取验证错误并在相应字段上显示每个错误吗？？？问题似乎在我的控制器$this->output->set_status_header$response['status']的这一行中。。我对这段代码进行了注释并进行了处理。成功和失败都在success:functionresponse内部工作。这个错误是：function还是success:function与$.ajax外部的doing.errorfunction或.successfunction相同？？

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