0

我正在尝试通过 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);
    }
4

2 回答 2

0

您需要提交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();
   })
 });
于 2013-02-07T10:08:02.050 回答
0

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

初始化后，它会自动捕获所有事件，包括click提交按钮。因此，您然后使用submitHandler回调函数来执行您的 Ajax 函数。

假设您内部的所有其他内容.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/

于 2013-02-07T16:18:38.203 回答