Question

我正在尝试通过Jquery Form插件处理表单，并使用jquery验证插件进行简单验证 jQuery Form Plugin

只是表单停留在发送并获取结果而不是在页面内显示打印结果它自动发送到操作页面

 var JQUERY4U = {};
 JQUERY4U.UTIL = {
     setupFormValidation: function () {
         $("#addCatgory").validate({
             rules: {
                 categoryname: {
                     required: true,
                     minlength: 5
                 },
                 categoryslug: {
                     required: true,
                     minlength: 5
                 }
             },
             messages: {
                 categoryname: 'Please enter your name',
                 categoryslug: 'Please enter a valid email'
             }
         });
     }
 }
 $(document).ready(function () {
     $('#addCatgory').AjaxForm({
         url: 'dashboard/categories/add',
         target: '#result',
         beforeSubmit: JQUERY4U.UTIL.setupFormValidation(),
         success: function (msg) {
             $('#result').fadeIn('slow', function () {
                 $('#result').html(msg);
             });
         }
     });
 });

验证工作完全没问题但验证通过后，而不是将结果显示到结果div中，它将带我到成功消息的空白页面。
这个控制器功能。

public function add ()
    {
        $data = array();
        if (!empty($_POST)) {
            $this->model->insert();
            echo 'welcome';
            exit;
        }

        $data['parent_cats'] = $this->model->get_parent();
        $this->load->view('dashboard/addcategory', $data, FALSE);
    }

Answer 1

您需要提交ajaxForm

$(document).ready(function () {
  $(document).on('click','.submitButton',function(e){
     e.preventDefault();
     $('#addCatgory').AjaxForm({
         url: 'dashboard/categories/add',
         target: '#result',
         beforeSubmit: JQUERY4U.UTIL.setupFormValidation(),
         success: function (msg) {
             $('#result').fadeIn('slow', function () {
                 $('#result').html(msg);
             });
         }
     }).submit();
   })
 });

Answer 2

删除整个JQUERY4U.UTIL.setupFormValidation()函数，因为在DOM就绪时应该只调用一次，而不是在单击“提交”时调用。（.validate()用于初始化插件。）

初始化后，它会自动捕获所有事件，包括提交按钮上的click。那你然后use the submitHandler callback function to do your Ajax function。

假设.AjaxForm()中的所有其他内容都正确无误：

$(document).ready(function () {

    $("#addCatgory").validate({
        rules: {
            categoryname: {
                required: true,
                minlength: 5
            },
            categoryslug: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            categoryname: 'Please enter your name',
            categoryslug: 'Please enter a valid email'
        },
        submitHandler: function (form) {
            $(form).AjaxForm({
                url: 'dashboard/categories/add',
                target: '#result',
                success: function (msg) {
                    $('#result').fadeIn('slow', function () {
                        $('#result').html(msg);
                    });
                }
            });
            return false;
        }
    });

});

工作演示：http://jsfiddle.net/xMMLC/

使用带有codeigniter的jquery表单插件？

2 个答案: