Использование jQuery validate для загрузки формы, использование ajax в submitHandler () ... не работает

Question

Я использую jquery validate с формой. Я хочу отправить форму, используя ajax. Когда я помещаю вызов ajax в validate submitHandler (), браузер зависает. Что происходит?

Сообщение об ошибке, которое появляется при включении отладки метода validate:

необученное исключение: [Исключение ... «Незаконная операция на WrappedNative Прототип объекта "nsresult: «0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)» расположение: "JS frame :: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js :: f :: строка 132 "данные: нет]

Что слишком загадочно для меня, чтобы понять.

Код:

$(document).ready(function() {
$("#loginForm").validate({
        debug: true,
        errorLabelContainer: $('div.error'),
        wrapper: 'li',
        rules:  {
            last_name: {
                required: true
            }
        },
        messages: {
            last_name: {
                required: "Please enter your last name."
            }
        },
        submitHandler: function(form){
            $.ajax({
                type: "POST",
                url: "test.php",
                data: form,
                success: function(msg){
                    console.log( "Data Saved: " + msg );
                },
                error: function(msg){
                    console.log( "Error: " + msg);
                }
            });
        }
    });

});

Форма очень ванильная. Отправка через стандартный POST работает нормально. Кроме того, проверка работает нормально ... это просто отправка с частью ajax, которая подводит меня.

Answer 1

вызов метода ajax с функцией php

<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

class Ajax{
public function submitForm($data=array()){
    //form - name attribute
    //do   - ajax page do_
    // get - ajax result
    return '<script language="javascript" type="text/javascript">
                $(document).ready(function (data){
                    $(\'form[name='.$data['form'].']\').validate({
                            submitHandler: function(form) {
                                $.ajax({
                                    method : \'post\',
                                    url    : \'' . AJAX_PATH . ''. $data['do'].'\',
                                    data   : $(this).serialize(),
                                    dataType : \'html\',
                                    success : function(data){
                                        $(\'form[name='.$data['form'].']\').slideUp(1000);
                                        $(\''. $data['get'] .'\').html(data).fadeIn(1000);
                                        //$(\''. $data['get'] .'\').html(data).fadeIn(1000);
                                    },
                                    error : function(data) {alert(\'missing file\'); }
                                });
                                return false;
                             }
                    });
                });
            </script>';
}

}

$ajax = new Ajax();

<?php echo $ajax->submitForm(array('do'=>'do_register.php','form'=>'register','get'=>'#message'));?>

Answer 2

Возможно, вы захотите сериализовать эту форму перед ее отправкой - вы, вероятно, не хотите отправлять объект DOM

edit RE: comment - чтобы выбрать только некоторые входы и сериализовать -

$(form).find(":input[name=inp1] :input[name=inp2]").serialize()

Answer 3

Просто для уточнения ответа. Вы можете изменить свое представление на

        $.ajax({
            type: "POST",
            url: "test.php",
            data: $(form).serialize(),
            success: function(msg){
                console.log( "Data Saved: " + msg );
            },
            error: function(msg){
                console.log( "Error: " + msg);
            }
        });

Функция ajax ожидает, что параметр данных будет строкой (не совсем верно, но в данном случае это нормально), пока вы передаете объект формы dom.