Может ли JQuery.Validate плагин предотвращать передачу формы Ajax

Я использую плагин формы JQuery (http://malsup.com/jquery/form/) для обработки представления ajax формы. У меня также есть JQuery.Validate(http://docs.jquery.com/Plugins/Validation), подключенный для моей проверки на стороне клиента.

То, что я вижу, заключается в том, что проверка не выполняется, когда я ожидаю, что она не прекратит отправку формы. Когда я использовал традиционную форму (т.е. Не-ajax), ошибка проверки не давала формы для отправки вообще...., что является моим желаемым поведением.

Я знаю, что проверка правильности подключена правильно, так как сообщения проверки еще появляются после того, как произошла попытка ajax submit.

Итак, что мне не хватает, что мешает моему желаемому поведению? Пример кода ниже....

<form id="searchForm" method="post" action="/User/GetDetails">
        <input id="username" name="username" type="text" value="user.name" />  
        <input id="submit" name="submit" type="submit" value="Search" />   
</form>
<div id="detailsView">
</div>  

<script type="text/javascript">
    var options = {
        target: '#detailsView'
    };
    $('#searchForm').ajaxForm(options);

    $('#searchForm').validate({
    rules: {
    username: {required:true}},
    messages: {
    username: {required:"Username is a required field."}}
    });
</script>

Ответ 1

Вам нужно добавить функцию обратного вызова для использования с событием beforeSubmit при инициализации ajaxForm():

var options = {
        beforeSubmit: function() {
            return $('#searchForm').validate().form();
        },
        target: '#detailsView'
    };

Теперь он проверяет результат проверки перед отправкой страницы.

Ответ 2

... ну это было время, поэтому моя ситуация немного изменилась. В настоящее время у меня есть опция submitHandler, переданная в плагин Validate(). В этом обработчике я вручную использую ajaxSubmit. Больше обходного решения, чем ответ, я думаю. Надеюсь, что это поможет.

http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

var v = jQuery("#form").validate({
    submitHandler: function(form) {
        jQuery(form).ajaxSubmit({target: "#result"});
    }
});

Ответ 3

$('#contactform').ajaxForm({
  success : FormSendResponse, 
  beforeSubmit:  function(){
    return $("#contactform").valid();
  }
});


$("#contactform").validate();

Выше код работал отлично для меня.

Ответ 4

Как первый проход, мне интересно, почему строка

$("form").validate({

не относится к $( "searchform" ). Я не смотрел это или не пытался, но это похоже на несоответствие. Не хотите ли вы вызвать подтверждение в соответствующей форме?

В любом случае, если это совершенно неправильно, то ошибка не сразу очевидна.:)

Ответ 5

Также убедитесь, что все ваши поля ввода имеют атрибут "имя", а также атрибут "id". Я заметил, что плагин проверки jquery не работает корректно без них.

Ответ 6

ok, это старый вопрос, но я поставлю наше решение здесь для потомков. я лично классифицирую это как хак-трофей, но, по крайней мере, это не хак-таку-манджаро

<script type="text/javascript">
    var options = {
        target: '#detailsView'
    };

// -- "solution" --
$('#searchForm').submit(function(event) {
  this.preventDefault(event); // our env actually monkey patches preventDefault
                              // impl your own prevent default here
                              // basically the idea is to bind a prevent default
                              // stopper on the form submit event
});
// -- end --

    $('#searchForm').ajaxForm(options);

    $('#searchForm').validate({
      rules: {
      username: {required:true}},
      messages: {
      username: {required:"Username is a required field."}}
    });
</script>

Ответ 7

Может быть return false; по форме поможет? :) Я имею в виду:

<form id="searchForm" method="post" action="/User/GetDetails" onSubmit="return false;">