使用Codeigniter和Ajax提交進行jQuery驗證不起作用

Question

我正在使用codeigniter框架創建注冊表單，我也使用jQuery來驗證驗證工作的字段，但是在填寫所有詳細信息並單擊“注冊”按鈕之后，沒有任何反應jQuery不會將數據發布到控制器。 請幫忙

這是我的html代碼：

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

我的jQuery代碼：

        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");
                }
            });
        }

而我的控制器代碼：

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

問題似乎出在jQuery代碼中

url: "<?php echo base_url()?>index.php/login/create_user",

jQuery不讀取PHP代碼。 嘗試將其更改為

url: "login/create_user",

希望這可以幫助。

Answer 2

Codeigniter驗證不適用於Jquery / Ajax表單提交。 請手動進行驗證...

foreach($_POST as $key =>$value){
  if($value==''){
   echo 'Error';
}

}

通過此服務器響應，您可以提醒用戶，或者簡單地https://jqueryvalidation.org/documentation/使用此客戶端驗證。