samedi 25 juin 2016

jQuery validation with codeigniter and ajax submission not working

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;
            }
        }
}
?>

Aucun commentaire:

Enregistrer un commentaire