如何解析表单[0] .submit不是一个函数(...)

时间:2016-11-14 04:42:52

标签: javascript php jquery forms

我有验证提交按钮的问题。 所以这里是我的代码:



 var handleValidation = function() {

                var form    = $('#form-date');
                var error   = $('.alert-danger', form);
                var success = $('.alert-success', form);

                form.validate({
                    errorElement: 'span', //default input error message container
                    errorClass: 'help-block help-block-error', // default input error message class
                    focusInvalid: false, // do not focus the last invalid input
                    ignore: "", // validate all fields including form hidden input
                    rules: {
                        
                        start: {
                            required: true,
                            date: true,
                            remote: {
                            url: "<?php echo site_url('activity/check_date')?>",
                              type: "post",
                              data: {
                               start: function(){ return $("#date").val(); }

                                         }
                                   }  

                        },
                        end: {
                            required: true,
                            date: true,
                            remote: {
                            url: "<?php echo site_url('activity/check_end')?>",
                              type: "post",
                              data: {
                               end: function(){ return $("#end").val(); }

                                         }
                                   }  
                        },
                       
                    },

                     messages: {
                            start: 
                             {
                                    remote: 'Date already in use.'
                             },
                             end:
                             {
                                remote: 'Date already in use.'
                             },
                      }, 

                    

                    invalidHandler: function (event, validator) { //display error alert on form submit   
                        success.hide();
                        error.show();
                        App.scrollTo(error, -200);
                    },

                    highlight: function (element) { // hightlight error inputs
                       $(element)
                            .closest('.form-group').addClass('has-error'); // set error class to the control group
                    },

                    unhighlight: function (element) { // revert the change done by hightlight
                        $(element)
                            .closest('.form-group').removeClass('has-error'); // set error class to the control group
                    },

                    success: function (label) {
                        label
                            .closest('.form-group').removeClass('has-error'); // set success class to the control group
                    },

                    submitHandler: function (form) {
                       success.show();
                        error.hide();
                        form[0].submit(); // submit the form
                    }

                });
        }
&#13;
<form class="form-horizontal" id="form-date" role="form" method="post" action="<?php echo base_url(); ?>activity/add">
                <div class="form-body">
                        <div class="alert alert-danger display-hide">
                            <button class="close" data-close="alert"></button>
                            You have some form errors. Please check below.
                        </div>
                        <div class="alert alert-success display-hide">
                            <button class="close" data-close="alert"></button>
                            Your form validation is successful!
                        </div> 
                    <input type="hidden" class="form-control" name="nik" value="<?php echo $this->session->userdata('nik')?>">

                    <div class="form-group"> 
                        <label  class="col-sm-3 control-label">Start Date:<span
                                class="required">*</span> </label> 
                        <div class="col-sm-7"> 
                        <div class="input-group date date-picker" data-date-format="yyyy-mm-dd">
                            <input type="text"  class="form-control" readonly id="date" name="start" required>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span></div>
                        </div> 
                    </div> 
                    <div class="form-group"> 
                        <label  class="col-sm-3 control-label">End Date:<span
                                class="required">*</span> </label> 
                        <div class="col-sm-7"> 
                        <div class="input-group date date-picker" data-date-format="yyyy-mm-dd">
                            <input type="text"  class="form-control" readonly id="end" name="end" required>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span></div>
                        </div> 
                    </div> 
                    
                    
                </div> 
                </div>
                <div class="modal-footer"> 
                    <div class="form-actions"> 
                    <div class="row">
                    <div class="col-md-offset-3 col-md-5">
                        <button type="submit"  class="btn green">
                          <i class="fa fa-pencil"></i> Create</button>
                         <button type="button" class="btn default" data-dismiss="modal">Cancel</button>
                    </div>
                    </div>
                    </div> 
                </div> 
                    </form>     
&#13;
&#13;
&#13;

我已验证数据为空显示警告的位置,但如果数据成功,则显示警告成功并且没有重定向。控制台错误显示

  

form [0] .submit不是函数(...)

所以代码错误的地方。 如何解决?

1 个答案:

答案 0 :(得分:1)

只需改变:

form[0].submit();

form.submit();

form的{​​{1}}参数是dom元素而不是jQuery对象,而per plugin docs应该使用本机提交