CodeIgniter ajax form validation not showing any message on screen - php

Question

I'd like some help please.
I'm having a form placed inside a bootstrap modal window.
<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 -->
When I click the Submit the Form button I'm sending an ajax request to my form_process controller where I do the form validation. Here's my code for the form_process function and the ajax script
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();
}
The ajax script looks like this
$('#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');
}
}
});
});
});
EDIT I did an update on my ajax script and placed some alert messages, as you can see. When I click the submit button without submitting the form ( so there are errors), the alert DDDDDDD pops up.
When I fill all fields and submit the form the alert CCCCCCC pops up (!!!). In addition the ajaxResults div gets the .alert and .allert-success classes, but still can't see any message.
Any ideas what I'm doing wrong ?
Additional question: Is the error: function(response) used to show the the case where validation fails ?
I have also tried to move the validation errors inside this function and keep on success : function(response) only the success submition of the form, but still no luck.

Answer 1

I can see you are not parsing the data properly
example : in alert('DDDDDDDDDDDDDDDDDDDDDDDDDDDD'); line
before appending data to your ajaxResults you need to convert data Properly
response.responseText => will give you json string .
JSON.parse => will convert string to JSON Obj so that you can
use it like .variableName
Please add the following code before your
$('#ajaxResults').addClass('alert alert-error').html(response.reason);
add following line
var mess = JSON.parse(response.responseText).message;
replace response.reason to mess it should show you error Messages
Please mark it as answer if it works
full Code :
if (response.status == 400) {
$('#modal-form').show();
var mess = JSON.parse(response.responseText).message;
$('#ajaxResults').addClass('alert alert-error').html(mess);
alert('DDDDDDDDDDDDDDDDDDDDDDDDDDDD');
}
working

Answer 2

If it takes you to the error part, then you must use something like this to catch it:
,
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError) ; // or alert(xhr.responseText);
$('#ajaxResults').addClass('alert alert-error').html(thrownError) ;
}
And if the ajax call is successful, something like this:
,
succes: function(data, status, jqXHR){
if (status == 200) {
$('#modal-form').hide();
$('#ajaxResults').addClass('alert alert-success').html(response.message);
alert(data);
}
}

Answer 3

The "problem" was this output->set_status_header($response['status']) the request was always successful, but setting a header to 400 messed up the functionality.
I removed this piece of code and now works fine! However I still needed to add the
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError) ; // or alert(xhr.responseText);
$('#ajaxResults').addClass('alert alert-error').html(thrownError) ;
}
to get any errors in cases that the request fail.