jQuery validation with codeigniter and ajax submission not working - php

Question

I am use codeigniter framework to create a registration form I have also use jQuery to validate the fields the validation is working but after filling all details and click register button nothing is happen jQuery does not post data to controller. please help
Here is my html code:
<form method="post" action="" name="sentMessage" id="contactForm" novalidate >
<div class="row">
<div class="col-sm-12">
<h3>Registration Form</h3>
</div>
<div class="col-sm-12">
<div class="form-group">
<input class="text required" type="text" placeholder="UserName" name="username" id="uname" data-validation-required-message="Please enter your UserName." />
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="text required" type="text" placeholder="First Name" name="fname" id="fname" data-validation-required-message="Please enter your First Name."/>
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="text required " type="text" placeholder="Last Name" name="lname" id="lname" data-validation-required-message="Please enter your Last Name."/>
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="text required email" type="email" placeholder="Email" name="email" id="uemail" data-validation-required-message="Please enter your Email."/>
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="text required" type="password" placeholder="Password" name="password" id="upassword" data-validation-required-message="Please enter your Password."/>
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="text required" type="password" placeholder="Confirm Password" name="cpassword" id="cpassword" data-validation-required-message="Please enter your Password."/>
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 rst-contactsubmit">
<div class="form-group">
<!-- required data-validation-required-message="Please enter your message." -->
<p class="help-block text-danger"></p>
<div id="success"></div>
</div>
<input class="btn btn-primary btn-lg" type="submit" value="REGISTER" />
</div>
</div>
</form>
My jquery code :
if( jQuery("#contactForm").length ) {
jQuery("#contactForm input").jqBootstrapValidation({
preventSubmit: true,
submitError: function(jQueryform, event, errors) {
// additional error messages or events
},
submitSuccess: function(jQueryform, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var username = jQuery("input#contact-username").val();
var fname = jQuery("input#contact-fname").val();
var lname = jQuery("input#contact-lname").val();
var email = jQuery("input#contact-email").val();
var password = jQuery("input#contact-password").val();
var firstName = fname; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = fname.split(' ').slice(0, -1).join(' ');
}
jQuery.ajax({
type: "POST",
url: "<?php echo base_url()?>index.php/login/create_user",
data: {
username: username,
fname: fname,
lname: lname,
email: email,
password: password,
},
cache: false,
success: function() {
// Success message
jQuery('#success').html("<div class='alert alert-success'>");
jQuery('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
jQuery('#success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
jQuery('#success > .alert-success')
.append('</div>');
//clear all fields
jQuery('#contactForm').trigger("reset");
},
error: function() {
// Fail message
jQuery('#success').html("<div class='alert alert-danger'>");
jQuery('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
jQuery('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that server is not responding. Please try again later!");
jQuery('#success > .alert-danger').append('</div>');
//clear all fields
jQuery('#contactForm').trigger("reset");
},
})
},
filter: function() {
return jQuery(this).is(":visible");
}
});
}
And my controller code :
<?php
class Login extends CI_Controller
{
function __construct()
{
parent::__construct();
}
public function index(){
$this->load->helper(array('form'));
$this->load->view('login');
}
function validate_credentials(){
$this->load->model('membership_model');
$query = $this->membership_model->validate();
if($query){
$data = array('username' => $this->input->post('username'), 'is_logged_in' => true);
$this->session->set_userdata($data);
redirect('<?php base_url()index.php/user_dashboard');
}
}
function create_user(){
$this->load->library('form_validation');
$this->form_validation->set_rules('username', 'Username', 'trim|required|callback_check_username');
$this->form_validation->set_rules('fname', 'Name', 'trim|required');
$this->form_validation->set_rules('lname', 'Last Name', 'trim|required');
$this->form_validation->set_rules('email', 'Email-id', 'trim|required|valid_email|callback_check_email');
$this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[4]');
$this->form_validation->set_rules('cpassword', 'Confirm Password', 'trim|required|matches[password]');
if($this->form_validation->run() == FALSE){
echo "fail";
}
else{
$this->load->model('membership_model');
if($query = $this->membership_model->create_user())
{
$data['account created'] = 'your account is created';
$this->load->view('login', $data);
}
else{
$this->load->view('register');
}
}
}
function check_username($requested_username){
$this->load->model('membership_model');
$username_available = $this->membership_model->check_username($requested_username);
if($username_available){
return TRUE;
}
else{
return FALSE;
}
}
function check_email($requested_email){
$this->load->model('membership_model');
$email_available = $this->membership_model->check_email($requested_email);
if($email_available){
return TRUE;
}
else{
return FLASE;
}
}
}
?>

Answer 1

The problem seems to be in the jQuery code
url: "<?php echo base_url()?>index.php/login/create_user",
jQuery doesn't read PHP code. try changing it to
url: "login/create_user",
Hope this helps.

Answer 2

Codeigniter Validation will not work with Jquery/Ajax Form Submission. Please manually do the validation...
foreach($_POST as $key =>$value){
if($value==''){
echo 'Error';
}
}
By this server response you can alert the user Or else simply
https://jqueryvalidation.org/documentation/ use this client side validation.