0

jquery 検証プラグインjQuery Form Pluginを使用した簡単な検証で、Jquery Form プラグインを介してフォームを処理しようとしています。

アクションページに送信するページ内に印刷された結果を表示するのではなく、単に送信して結果を取得するときにフォームがスタックするだけです。

 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 に答える