$ (form).ajaxSubmit не является функцией

Я пытаюсь использовать плагин проверки jquery для проверки формы и отправки содержимого с помощью запроса ajax.

Этот код находится в начале моего документа.

 $(document).ready(function() {
    $('#contact-form').validate({submitHandler: function(form) {
         $(form).ajaxSubmit();   
         contactSuccess() ;
         }
    });
});

Работа проверки. Однако представление выполняется в обычном режиме: при представлении страница перезагружается. Конечно, для браузеров, у которых нет js, у меня есть резервное поведение, отличное от js. Но я хотел бы получить более плавный пользовательский опыт работы.

Ошибка, которую я вижу в firebug: $ (form).ajaxSubmit не является функцией

Что я могу делать неправильно здесь?

Ответ 1

Я предполагаю, что вы не включили плагин jquery form. Я полагаю, ajaxSubmit не является основной функцией jquery.

Что-то вроде этого: http://jquery.malsup.com/form/

UPD

<script src="http://malsup.github.com/jquery.form.js"></script>

Ответ 2

это новая функция, поэтому вам нужно добавить другой файл lib после jQuery lib

<script src="http://malsup.github.com/jquery.form.js"></script>

он будет работать. Я протестировал.. надеюсь, что он сработает для вас.

Ответ 3

Ajax Отправить форму с обновлением страницы с помощью метода jquery ajax сначала включить библиотеку jquery.js и jquery-form.js, а затем создать форму в html:

<form action="postpage.php" method="POST" id="postForm" >

<div id="flash_success"></div>

name:
<input type="text" name="name" />
password:
<input type="password" name="pass" />
Email:
<input type="text" name="email" />

<input type="submit" name="btn" value="Submit" />
</form>

<script>
  var options = { 
        target:        '#flash_success',  // your response show in this ID
        beforeSubmit:  callValidationFunction,
        success:       YourResponseFunction  
    };
    // bind to the form submit event
        jQuery('#postForm').submit(function() { 
            jQuery(this).ajaxSubmit(options); 
            return false; 
        }); 


});
function callValidationFunction()
{
 //  validation code for your form HERE
}

function YourResponseFunction(responseText, statusText, xhr, $form)
{
    if(responseText=='success')
    {
        $('#flash_success').html('Your Success Message Here!!!');
        $('body,html').animate({scrollTop: 0}, 800);

    }else
    {
        $('#flash_success').html('Error Msg Here');

    }
}
</script>

Ответ 4

Try:

$(document).ready(function() {
    $('#contact-form').validate({submitHandler: function(form) {
         var data = $('#contact-form').serialize();   
         $.post(
              'url_request',
               {data: data},
               function(response){
                  console.log(response);
               }
          );
         }
    });
});

Ответ 5

Попробуйте ajaxsubmit библиотеку. Он представляет собой ajax-представление, а также проверку через ajax.

Также конфигурация очень гибкая, чтобы поддерживать любой пользовательский интерфейс.

Живая демонстрация доступна с примерами js, css и html.

Ответ 6

Drupal 8

Drupal 8 не включает JS-библиотеки в страницы автоматически. Поэтому, скорее всего, если вы встретите эту ошибку, вам необходимо прикрепить библиотеку "core/jquery.form" к вашей странице (или форме). Добавьте что-то подобное вашему массиву рендеринга:

$form['#attached']['library'][] = 'core/jquery.form';

Ответ 7

Я думаю, что вы хотите сделать $(this).ajaxSubmit();... также, обратите внимание, что пример из документация:

// attach handler to form submit event
$('#myFormId').submit(function() {
    // submit the form
    $(this).ajaxSubmit();
    // return false to prevent normal browser submit and page navigation
    return false;
});

- то есть, вам нужно вернуть false,, чтобы предотвратить отправку обычного браузера.

Ответ 8

$(form).ajaxSubmit();

вызывает еще одну проверку, приводящую к рекурсии. попробуйте изменить его на

form.ajaxSubmit();