jQuery validation with codeigniter and ajax submission not working

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'>&times;")
                                .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'>&times;")
                                .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;
            }
        }
}
?>

You use like this <?php echo base_url();?>/index.php/login/create_user — vijaykumar
– vijaykumar, Commented Jun 20, 2016 at 5:50

Osama Sayed · Accepted Answer · 2016-06-20 05:48:59Z

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.

answered Jun 20, 2016 at 5:48

Osama Sayed

2,03316 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nitesh Jadhav Over a year ago

Thank you so much..... :) but after doing correction form does not enter value in database...

Osama Sayed Over a year ago

@NiteshJadhav can you change success function in Ajax call to accept obj parameter like this success(obj) and then alert the obj.message and tell me what you see? alert(obj.Message);

Nitesh Jadhav Over a year ago

Its show "Your message has been sent." but nothing in database

Giri Annamalai M · Accepted Answer · 2016-06-22 13:47:47Z

0

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.

answered Jun 22, 2016 at 13:47

Giri Annamalai M

80910 silver badges27 bronze badges

Collectives™ on Stack Overflow

jQuery validation with codeigniter and ajax submission not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related